php - HTML表格的CSS宽度问题

Question

我认为自己精通 CSS 和 HTML，但我无法通过 HTML 表中的一列来解决这个问题。这是链接：

我已经研究了很长一段时间，并且使用了固定宽度、最小宽度、最大宽度，并且无法弄清楚当表格减小时如何使最后一列（在注释下）正确调整大小. 如果您减少和增加浏览器窗口，您将看到表格调整大小以适应。但是，当您将浏览器窗口缩小到一定程度时，最后一列会弹出到下一行。

我知道这不是响应式的，等等，我们稍后会做所有这些工作，但现在我只是想让评论列中的内容减小宽度并适合它自己的列。

任何帮助将不胜感激。

score 1 · Accepted Answer

当我在 Chrome 中测试它时，这个解决方案对我有用。它也有点小故障。

th[scope="row"] table.reports_table tr td {
    padding: 8px 10px;
    color: black;
    float: left; /*Remove this */
}

score 0 · Accepted Answer

如果内容增长超过表大小，通常会溢出。将表格布局设置为“固定”，这将防止内容溢出。在你的情况下：

.table.reports_table {
table-layout:fixed;
}

当 table-layout 固定时， min-width 在表格元素上几乎没有用。所以将它们更改为宽度。在你的情况下：

.th[scope="row"] table.reports_table tr td:nth-child(10) {
width: 440px;
}

打破单词以适合表格中所有 td 的单元格。在你的情况下：

.reports_table{
    word-break: break-all;
}

2 回答 2