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/。请注意，当屏幕宽度足够宽时，一切看起来都很棒。如果你开始拖动（收缩）窗口，你会看到内容爆炸。

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

1 个答案: