Equal columns in a table without knowing the number of columns just using html/CSS

Bit of old school one i think but wondered if anyone had a solution for it by now:

Is there a way of getting equal columns in a table without knowing the number of columns just using html/CSS?

After the cleanest method possible really.

This is my test table at the moment:

<table class="panel-form panel-form_horizontal" style="width:100%;">
  <tbody>
    <tr>
      <td colspan="3" class="header">
        <h3>fieldset 1</h3>
        <menu>
          <button id="">edit</button>
        </menu>
     </td>
    </tr>
    <tr>
      <td><label>name</label></td>
      <td><label>name</label></td>
      <td><label>name</label></td>
    </tr>
    <tr>
      <td>supplier_1</td>
      <td>www.bbc.co.uk</td>
      <td>0</td>
    </tr>
    <tr>
      <td colspan="3" class="header">
        <h3>fieldset 2</h3>
        <menu>
          <button id="">edit</button>
        </menu>
      </td>
    </tr&开发者_StackOverflowgt;
    <tr>
      <td><label>name</label></td>
      <td><label>name</label></td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

---

There is no perfect solution to your question if you don't know the number of columns.

You can try:

table {
    table-layout:fixed;
}

This will force the table to use fixed, equal cells. The problem is if your content is too large for the cell size it'll cause issues with content overlap, etc.

Here's a basic sample using your markup: http://jsfiddle.net/9HC8b/. Notice when the screen width is wide enough everything looks great. If you start dragging (shrinking) the window you'll see the content blows up.