MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 105936 of Tables

  • Revision slug: Useful_CSS_tips/Tables
  • Revision title: Tables
  • Revision id: 105936
  • Created:
  • Creator: Lombardp
  • Is current revision? No
  • Comment /* Fixed header */

Revision Content

Borders

This is a standard table with non-zero cellspacing and 1px cell borders.

Table with cellspacing="4"
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

If you want to transform the table in a grid, you set cellspacing to 0 and the rendered tables is this.

Table with cellspacing="0"
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

The result is not as expected and the reason is that the default border model is set to separate: with this model each cell has its own border, also if cells sapcing is zero. In order to have a grid-like rendering, the collapse border model has to be set.

Table with cellspacing="0"
and border-collapse:collapse;
cell content cell content cell content
cell content cell content cell content
cell content cell content cell content

Fixed header

<thead style="display: table-header-group;">

</thead> <tbody style="height: 20px; overflow: auto;">

</tbody>

Header Header Header
cell cell cell
cell cell cell
cell cell cell
cell cell cell
cell cell cell

Revision Source

<h3 name="Borders"> Borders </h3>
<p>This is a standard table with non-zero cellspacing and 1px cell borders.
</p>
<table cellspacing="4">
<tbody><tr><td colspan="3" style="border: 1px solid black;">Table with cellspacing="4"</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
</tbody></table>
<p>If you want to transform the table in a grid, you set cellspacing to 0 and the rendered tables is this.
</p>
<table cellspacing="0">
<tbody><tr><td colspan="3" style="border: 1px solid black;">Table with cellspacing="0"</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
</tbody></table>
<p>The result is not as expected and the reason is that the default border model is set to <b>separate</b>: with this model each cell has its own border, also if cells sapcing is zero. In order to have a grid-like rendering, the <b>collapse</b> border model has to be set.
</p>
<table cellspacing="0" style="border-collapse:collapse;">
<tbody><tr><td colspan="3" style="border: 1px solid black;">Table with cellspacing="0" <br>and border-collapse:collapse;</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
<tr><td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td>
    <td style="border: 1px solid black;">cell content</td></tr>
</tbody></table>
<h3 name="Fixed_header"> Fixed header </h3>

&lt;thead style="display: table-header-group;"&gt;
<p>&lt;/thead&gt;
&lt;tbody style="height: 20px; overflow: auto;"&gt;
</p><p>&lt;/tbody&gt;
</p><table cellspacing="0" style="border-collapse: collapse;"><tbody><tr><th style="border: 1px solid black;">Header</th>
    <th style="border: 1px solid black;">Header</th>
    <th style="border: 1px solid black;">Header</th></tr>

<tr><td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td></tr>
<tr><td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td></tr>
<tr><td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td></tr>
<tr><td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td></tr>
<tr><td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td>
    <td style="border: 1px solid black;">cell</td></tr>

</tbody></table>
Revert to this revision