Question

我有两张桌子靠近。

我想让第一列的两个表具有相同的大小，就像行在同一个表中一样。我不想为列设置固定大小。

table td:first-child {
  background-color: pink;
}

<table>
  <tr>
    <td>Caption from first table</td>
    <td></td>
  </tr>
</table>

<table>
  <tr>
    <td>Caption from second table</td>
    <td></td>
  </tr>
</table>

我没有使用同一个表的原因是因为第二个表来自可重用的组件，所以这两个表必须保持分开。

我看到的一个解决方案是在运行时以不同的方式使用JavaScript：

将第二个表的所有<tr>行添加到第一个表并删除第二个表。这种方法的问题是如果我们希望每个表都有单独的样式并且CSS在table元素上使用类名，CSS可能会停止工作。
可以计算所有第一列的最大大小并应用于其他列。当所有列都存在时，这很容易，但如果动态添加表/行，则会很复杂。

Answer 1

这是一种方法，替换表end / start标签。

根据评论进行更新

要解决CSS规则，可以很容易地为每个表的第一个tr提供一个特定于表的类，然后将其用于样式化。

此提示适用于独立表和合并表。

＆＃13;

(function() {
  
  document.body.innerHTML = document.body.innerHTML.replace(/<\/table>(.*|[\r\n]*)<table>/gi,'');

})();

＆＃13;

table td:first-child {
  background-color: pink;
}

table .tbl1 td:first-child {
  color: blue;
}

table .tbl2 td:first-child {
  color: white;
}

＆＃13;

<table>
  <tr class="tbl1">
    <td>Caption from first table</td>
    <td></td>
  </tr>
</table>

<table>
  <tr class="tbl2">
    <td>Caption from second table</td>
    <td></td>
  </tr>
</table>

＆＃13;

Answer 2

我过去在多个div上做过类似的事情。

如果您可以编辑第一个td以获得CSS类，则以下内容适用于您：

HTML

<table>
  <tr>
    <td class="samewidth">Caption from first table</td>
    <td></td>
  </tr>
</table>

<table>
  <tr>
    <td class="samewidth">Caption from second table</td>
    <td></td>
  </tr>
</table>

jQuery的：

$(document).ready(function () {
        var maxWidth = 0;
        $('td.samewidth').each(function () { maxWidth = Math.max(maxWidth, $(this).width()); }).width(maxWidth);
});

（注意：需要jQuery，如果你有很多表，可能效率不高！）

在表

2 个答案: