Table lines cannot be hidden in HTML output

[linjinwei]

Hello everyone

In XMetaL, the table property allows you to hide the table lines. However when I output in HTML, the lines are still there. Why is that?

By the way, the lines are hidden in PDF and works fine. By doesnt it work in HTML?

Reply

[Derek Read]

The DITA OT is designed to handle the frame, colsep and rowsep attributes for tables when generating HTML. See the DITA Language Reference regarding expected behaviours for DITA processors when dealing with tables (which is not HTML-specific). The relevant topic in the DITA Language Reference is simply called “table” (which you can get to by selecting a table in XMetaL and then pressing Alt+F1).

The file that controls this transformation is xslxslhtmldita2htmlImpl.xsl

That file contains various XSL sections that trigger different class attribute values to be inserted into the HTML based on settings in the table, row and entry elements in the XML source. Here's one relevant portion:

[code]
    nocellnorowborder
    row-nocellborder
    cell-norowborder
    cellrowborder
  [/code]

From what I can tell you have three options here (I think you are asking for no borders drawn anywhere at all in your HTML tables):

1. Understand the implications of settings all the different combinations of attributes for the various table elements in the XML and try to get it just perfect. To get what you want you may need to have to set every single colsep and rowsep to “0” for table, colspecs and every row and entry element. You will also need to set the frame attribute inside the table element to “none”. If you end up setting something in the XML and you are sure it is not doing what it should do you should file a defect report with the DITA Open Toolkit project at SourceForge.net so it can be addressed.

2. Modify the XSLT file so it does not generate these class attributes in the resulting HTML (or get it to do something else that you like instead, perhaps giving them all the same value regardless of the DITA attribute values).

3. Modify the commonltr.css (or override it by loading your own CSS file afterwards). The section that styles these things is:
[code].cellrowborder { border-left:none; border-top:none; border-right:solid 1px; border-bottom:solid 1px }
.row-nocellborder { border-left:none; border-right:none; border-top:none; border-right: hidden; border-bottom:solid 1px}
.cell-norowborder { border-top:none; border-bottom:none; border-left:none; border-bottom: hidden; border-right:solid 1px}
.nocellnorowborder { border:none; border-right: hidden;border-bottom: hidden }[/code]
In this case you will still need to worry about the frame, colsep and rowsep attribute for the DITA table element because the values set there control hard-coded border and rules attributes in the HTML table element.

So, you may have quite a bit of discovering to do before you decide how you want to handle this.

The quickest (ie: easiest) solution I can think of that doesn't require a lot of thinking and mucking around with the XML (ie: option 1 above) and would be to do the following:

1. Leave all the default values for the child elements within the table (colspec, row and entry), but change the table element like so:
[code]

[/code] You will then end up with the following HTML (which is a little bit dirty because it contains some classes you will not use, if you care about that then you'll need to use method 1 or 2 above):
[code]

H1	H2
c1r1	c2r1
c1r2	c2r2

[/code]

2. Do not define the following properties for the following classes in your CSS file, or if you are using commonltr.css then simply comment them out:
[code]/*.cellrowborder { border-left:none; border-top:none; border-right:solid 1px; border-bottom:solid 1px }
.row-nocellborder { border-left:none; border-right:none; border-top:none; border-right: hidden; border-bottom:solid 1px}
.cell-norowborder { border-top:none; border-bottom:none; border-left:none; border-bottom: hidden; border-right:solid 1px}
.nocellnorowborder { border:none; border-right: hidden;border-bottom: hidden }*/[/code]

The logic behind this idea is to reduce the amount of XML you need to deal with editing. It also assumes that removing stuff from a CSS file is easier to understand than mucking around with the XSLT. You may wish to comment out just the .cellrowborder class instead. I have commented the entire section out because it seems that you might accidentally set on of the other DITA attributes, causing one of the other classes to be inserted in the HTML. Your choice.

Reply

[Author]

Posts