LucMorrissette LucMorrissette - 7 months ago 21
HTML Question

Are the Twitter Bootstrap span classes appropriate for setting table column widths?

I inherited a project that has Bootstrap "span" classes used in tables throughout.

Is the following markup even valid? If not, why?

<table class="table">
<tr>
<td class="span6">Hello</td>
<td class="span3">World</td>
<td class="span3">2013</td>
</tr>
</table>


I feel like it's not the right approach to setting column widths with Bootstrap.

Answer

It's not wrong, but there is a more efficient way to set column widths in a table. Rather than setting classes on each and every <td/>, you could use the table's <colgroup/> tags. It's specifically designed for formatting table columns.

<table class="table">
  <colgroup>
    <col class="span6" />
    <col class="span3" />
    <col class="span3" />
  </colgroup>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  ...
</table>
Comments