Равные столбцы в таблице, не зная количество столбцов, просто используя HTML / CSS

Question

Немного из старой школы, я думаю, но подумал, есть ли у кого-нибудь решение для этого:

Есть ли способ получить одинаковые столбцы в таблице, не зная количества столбцов, просто используя html / CSS?

После того, как действительно самый чистый метод возможен.

Это моя тестовая таблица на данный момент:

<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>
    <tr>
      <td><label>name</label></td>
      <td><label>name</label></td>
    </tr>
    <tr>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Answer 1

Нет идеального решения вашего вопроса, если вы не знаете количество столбцов.

Вы можете попробовать:

table {
    table-layout:fixed;
}

Это заставит таблицу использовать фиксированные равные ячейки. Проблема в том, что если ваш контент слишком велик для размера ячейки, это приведет к проблемам с перекрытием контента и т. Д.

Вот базовый пример использования вашей разметки: http://jsfiddle.net/9HC8b/. Обратите внимание, когда ширина экрана достаточно широка, все выглядит великолепно. Если вы начнете перетаскивать (сжимать) окно, вы увидите, что содержимое взорвалось.