Tables

Edit online

There is a combination of CSS files that address tables: [PLUGIN_DIR]/css/core/-table-html-cals.css, [PLUGIN_DIR]/css/core/-table-cals.css.

Some of the tables can have a large number of columns. In this case, the table may bleed out of the page. One solution is to use landscape pages for these tables.

Setting the attribute @orient = 'land' on the table element will force the table on a new landscape page.

Another solution is to use automatic detection of wide tables (5 or more columns):

*[class~="topic/table"] > *[class~="topic/tgroup"][cols='5'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='6'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='7'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='8'] {
    page: landscape-page;
    max-width: 100%;
    page-break-before: avoid;
}    

If you want to rotate the entire topic that contains the big table, use:

*[class~="topic/table"] > *[class~="topic/tgroup"][cols='5'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='6'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='7'],
*[class~="topic/table"] > *[class~="topic/tgroup"][cols='8'] {
    max-width: 100%;
    table-layout:auto;
}

*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='5']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='6']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='7']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='8']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='5']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='6']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='7']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='8']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='5']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='6']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='7']),
*[class~="topic/topic"]:has(*:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *:not([class~="topic/topic"]) > *[class~="topic/table"] > *[class~="topic/tgroup"][cols='8']){
      page: landscape-page;
}

Slim tables or tables that have many columns make the text from the cells to be confined to a small horizontal space. Long words would bleed outside the cell boundaries. To fix this, you should enable hyphenation in your tables, thus making the words spread on multiple lines. In your customization CSS, add:

*[class~="topic/table"] {
    hyphens: auto;
}

The DITA specification indicates that tables should have a fixed layout. However, you can get a more optimal arrangement of the cells using the automatic layout. In your customization CSS, add:

*[class~="topic/tgroup"] {
    table-layout:auto !important;
}

<table outputclass='auto_tbl'> ... </table>

*[class~="topic/table"][outputclass='auto_tbl'] > *[class~="topic/tgroup"] {
    table-layout:auto !important;
}

Table NN. Lore Ipsum Title

NN is the number of the table that starts being counted from the beginning of the publication.

One use-case is to have the NN counter be incremented only within one chapter (for example, the first chapter contains "Table 1" and "Table 2", and the second chapter starts over with "Table 1" instead of incrementing to "Table 3").

For the DITA Map PDF - based on DITA & CSS (WYSIWYG) transformation scenario type, you must reset the table counter on each topic marked as chapter. In your customization CSS, use the following rules:

*[class ~= "topic/topic"][is-chapter] {
   counter-reset: tablecount;
} 

*[class ~= "topic/table"] > *[class ~= "topic/title"]:before {
  /* Add more styling or change the content if needed */
  content: "Table " counter(tablecount) ". ";
}

For the DITA Map PDF - based on HTML5 & CSS transformation scenario type, you should reset the table counter on each chapter, then hide the label from the table <caption> (this is an HTML element generated by the XSL transformation), and create another label using a :before selector on the <caption>.

*[class ~= "topic/topic"][is-chapter] {
  counter-reset:tablecount;
}

.table--title-label{
  display:none;
}

*[class ~= "topic/table"] > caption:before{
  /* Add more styling or change the content if needed */
  content: "Table " counter(tablecount) ". ";
  counter-increment:tablecount;
}

There are cases where you want to style the first column as a kind of table header, with vertical text.

There is an important thing to remember: you can rotate an element from a table cell, but not the cell itself. So, your DITA table cell should contain a <div> or a <p> element that will be rotated. The cell has to be marked somehow so that it can be matched from the CSS. One way is to set an @outputclass attribute on it, another will be to mark the table and then match the first entries from it.

  <row>
      ...
      <entry outputclass="rotated">
            <p>Rotated</p>
      </entry>
      ...
 </row>

In your customization CSS, use the following rule that matches the child of the entry:

*[outputclass ~= "rotated"] > * {
  display: block;
  transform: rotate(-90deg) !important;
  text-align: left !important;

  padding:0; 
  margin:0;
 
  white-space: nowrap;

  width:150px; 
  height:80px; 
}

The padding and margins are set to zero to clear any space that may come from other rules. The width is required - it will become the height of the cell. If this is not specified, the vertical rotated text will bleed out of the cell. The height is optional.