html - 使用 CSS 平衡表

Question

我有这些表格是由 Parsedown 创建的，Parsedown 是一个基于 PHP 的 Markdown 解析器，它的工作做得很好。

虽然在浏览器中显示表格的最终结果令人厌恶，但我附上了一张屏幕截图来说明我的意思。

在这个包含两列的表格中，我希望左列明显小于右列。通常我会像这样手动修复一个表，但由于该表是由 Parsedown 生成的，所以我不能。

我也不能在全局范围内使用 table-layout: fixed，因为我必须适应各种形状和大小的表格。

有没有人有解决方案，或者只是一个开始寻找解决方案的地方？

为了完整起见，这里是为该表生成的 HTML:

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
        <tr>
            <td>Small content</td>
            <td>Large content</td>
        </tr>
    </tbody>
</table>

Chrome 中的完整计算 CSS:

Answer 1

我知道通过向表格中的所有 th 和 td 添加 width: 1%; 可以轻松提高可读性。您可以尝试下面的 css 片段。不知道您的限制是否非常高，但如果您可以向表中添加类，我强烈建议您使用 bootstrap css for tables .

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  width: 1%;
  padding: .5rem;
  vertical-align: top;
}

table thead th {
  vertical-align: bottom;
}