Tables

  • Revision slug: Useful_CSS_tips/Tables
  • Revision title: Tables
  • Revision id: 105948
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment /* Fixed header */ [[Category:NeedsAttention]] - the text has "I will ask DEVMO admins..."

Revision Content

Centering

If you want to center a table, it is not correct to use

text-align: center

in its parent. The correct way is to apply

margin: 0px auto 0px auto

style to the table itself.

Table with margin: 0px auto 0px auto;
cell content cell content cell content
cell content cell content cell content
cell content cell content cell 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 spacing 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

Columns style

If you want to assign a particular style to certain table columns, the usual solution is to create a class style and explictly assign cells belonging to those columns to that class.

<style type="text/css">
td { background-color: #eeeeee; }
td.darkcol { background-color: #cccccc; }
</style>

<table>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
<tr><td class="darkcol">Cell</td>
    <td>Cell</td><td>Cell</td><td>Cell</td><td class="darkcol">Cell</td></tr>
</table>

This solution has the advantage to be cross-browser, but it also needs changing the HTML code, to explictly select table cells to be styled.

For browsers supporting adjacent selector there is an alternative pure CSS solution.

<style type="text/css">
/* Style for all rows */
tr { font: bold 16px Arial; }
/* Style for rows with a row before: 2nd, 3rd, 4th, ... */
tr + tr { font: 12px Arial; }

/* Style for all columns */
td { background-color: #cccccc; }
/* Style for rows with a row before: 2nd, 3rd, 4th, 5th */
td + td { background-color: #eeeeee; }
/* Style for rows with 4 rows before: 5th */
td + td + td + td + td { background-color: #cccccc; }
</style>

<table>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
<tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
</table>

Fixed header

If a table contain a lot of rows, when the user has to scroll down to see all data, table header row scrolls up and becomes invisibile. You can have a table with fixed header and vertical scrolling, use the following code.

this code does not form part of the original page and it was added by the translator Fr
<style type="text/css">
table {
	width: 20em;                    /* esthetics */
	border-collapse: separate;      /* by default */
/*  border-collapse: collapse;          /* Bug since 2002 with overflow-y: auto on tbody */
	border-spacing: 0;              /* workaround */
}
tbody {
	height: 10em;                   /* define the height */
	overflow-x: hidden;             /* esthetics */
	overflow-y: auto;               /* allow scrolling cells */
}
td {
	border-left: 1px solid blue;    /* workaround */
	border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
  <thead><tr><th>Header</th><th>Header</th><th>Header</th></tr></thead>
  <tfoot><tr><th>Foot</th><th>Foot</th><th>Foot</th></tr></tfoot>
  <tbody>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    <tr><td>Cell</td><td>Cell</td><td>Cell</td></tr>
  </tbody>
</table>

Actually there is a problem with Firefox styling engine (see {{ Bug("135236") }}), which seems not to correctly render tables with collapse border model and TBODY with overflow: auto style. I will ask DEVMO admins...

{{ languages( { "fr": "fr/Astuces_CSS/Tableaux" } ) }}

Revision Source

<p>
</p>
<h3 name="Centering"> Centering </h3>
<p>If you want to center a table, it is not correct to use<br>
</p>
<dl><dd> <code>text-align: center</code><br>
</dd></dl>
<p>in its parent. The correct way is to apply<br>
</p>
<dl><dd> <code>margin: 0px auto 0px auto</code><br>
</dd></dl>
<p>style to the table itself.
</p>
<table cellspacing="0" style="border-collapse:collapse; margin: 0px auto 0px auto;">
<tbody><tr><td colspan="3" style="border: 1px solid black;">Table with margin: 0px auto 0px auto;</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="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 spacing 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="Columns_style"> Columns style </h3>
<p>If you want to assign a particular style to certain table columns, the usual solution is to create a class style and explictly assign cells belonging to those columns to that class.
</p>
<pre>&lt;style type="text/css"&gt;
td { background-color: #eeeeee; }
td.darkcol { background-color: #cccccc; }
&lt;/style&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;
    &lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td class="darkcol"&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<p>This solution has the advantage to be cross-browser, but it also needs changing the HTML code, to explictly select table cells to be <i>styled</i>.
</p><p>For browsers supporting <i>adjacent selector</i> there is an alternative pure CSS solution.
</p>
<pre>&lt;style type="text/css"&gt;
/* Style for all rows */
tr { font: bold 16px Arial; }
/* Style for rows with a row before: 2nd, 3rd, 4th, ... */
tr + tr { font: 12px Arial; }

/* Style for all columns */
td { background-color: #cccccc; }
/* Style for rows with a row before: 2nd, 3rd, 4th, 5th */
td + td { background-color: #eeeeee; }
/* Style for rows with 4 rows before: 5th */
td + td + td + td + td { background-color: #cccccc; }
&lt;/style&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
<h3 name="Fixed_header"> Fixed header </h3>
<p>If a table contain a lot of rows, when the user has to scroll down to see all data, table header row scrolls up and becomes invisibile. You can have a table with fixed header and vertical scrolling, use the following code.
</p>
<div class="note">this code does not form part of the original page and it was added by the translator Fr</div>
<pre>&lt;style type="text/css"&gt;
table {
	width: 20em;                    /* esthetics */
	border-collapse: separate;      /* by default */
/*  border-collapse: collapse;          /* Bug since 2002 with overflow-y: auto on tbody */
	border-spacing: 0;              /* workaround */
}
tbody {
	height: 10em;                   /* define the height */
	overflow-x: hidden;             /* esthetics */
	overflow-y: auto;               /* allow scrolling cells */
}
td {
	border-left: 1px solid blue;    /* workaround */
	border-bottom: 1px solid blue;  /* workaround */
}
&lt;/style&gt;

&lt;table&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Header&lt;/th&gt;&lt;th&gt;Header&lt;/th&gt;&lt;th&gt;Header&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tfoot&gt;&lt;tr&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt;
  &lt;tbody&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</pre>
<p>Actually there is a problem with Firefox styling engine (see {{ Bug("135236") }}), which seems not to correctly render tables with <i>collapse border model</i> and TBODY with <i>overflow: auto</i> style. I will ask DEVMO admins...
</p>{{ languages( { "fr": "fr/Astuces_CSS/Tableaux" } ) }}
Revert to this revision