防止表格单元格宽度超过内容大小

Question

我似乎找不到一种不使用Javascript的方法来实现这个目标。

假设我有一个<table>，并且我不知道填充第一列的内容的潜在宽度。表格具有width:100%，以便其他列可以根据需要调整大小，但我希望保持第一列的固定宽度，以便它不会变得比内容更大。

这种方法是否无需Javascript就能实现呢？

<table>
    <tr>
        <th>Dynamic content column of unknown width</th>
        <th>Some other column that is allowed to grow/shrink</th>
    </tr>
    <tr>
        <td>Lorem ipsum ...</td>
        <td>195383 ...</td>
    </tr>
</table>

- Jesse

Answer 1

似乎将动态内容列的宽度设置为1px，则该列宽度将固定为该列中内容的宽度，并仍允许其他列随表格的增长/缩小。

- Jesse

---

只是一个建议，但您可以考虑使用min-和max-width（一起）作为替代方案；这为列留下了一点灵活性。安迪。 - Andy G

好的！谢谢你提醒我。 - Jesse

Answer 2

设置第一列的固定宽度：

tr th:first-child, tr td:first-child {
    width: 200px;
}

- Andy G

---

谢谢，但请记住我们不知道第一列的潜在宽度。不过我已经想出来了。 - Jesse