CSS 平衡表

Question

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

虽然 tables 在浏览器中的最终结果很糟糕，但我附上了一张屏幕截图来说明我的意思。

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

我也无法在全球范围内使用 table-layout: fixed，因为我必须适应各种形状和大小的 table。

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

为了完整起见，这里是为此 table:

生成的 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

我知道可以通过将 width: 1%; 添加到 th 和 td 中的 table 来轻松提高可读性。您可以尝试下面的 css 代码段。不知道您的限制是否非常高，但如果您可以将类添加到您的 table，我强烈建议您使用 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;
}

CSS 平衡表

Balance tables with CSS

html

css

html-table

css-tables