表中的相等列只是使用html / CSS而不知道列数

Posted 2021-05-04

我觉得有点旧学校，但想知道现在是否有人有解决方案：

有没有办法在表中获得相等的列而不知道仅使用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>

答案

如果您不知道列数，则没有完美的解决方案。

你可以试试：

table {
    table-layout:fixed;
}

这将迫使表使用固定的相等单元格。问题是，如果您的内容对于单元格大小而言太大，则会导致内容重叠等问题。

以下是使用标记的基本示例：http://jsfiddle.net/9HC8b/。请注意，当屏幕宽度足够宽时，一切看起来都很棒。如果你开始拖动（收缩）窗口，你会看到内容爆炸。