如何阻止 html 压缩内容？

Question

我正在尝试创建具有固定列宽的 table。我在两个轴上都有一个滚动条，这样我就可以看到溢出的内容，但是有些力量不断覆盖 CSS width 属性，以适应我的 div 中的内容.

它停止压缩足够的内容，因为我在 table body 的列上有一个 white-space: nowrap; 属性，但我想要 table header 最多换行一次。我试图在网上查看是否可以将换行限制为最多一次，结果发现：

max-height: 2.6em;
line-height: 1.3em;

但是当内容被压缩时，即使是这样也会被覆盖。我想完全停止在我的 div 中进行挤压，但是所有此类解决方案似乎都适用于 flex box，而我以前没有使用过这些。

最简单的解决方案是什么？

CSS:

#datawrapper {
    float: left;
    width: 75%;
    height: 600px;
    margin: 20px 20px 200px;
    overflow-y: auto;
    overflow-x: auto;
    
}

table {
    float: left;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}   

table th {
    border-bottom: 1px solid black;
    border-right: 1px solid black;

    background-clip: padding-box;
    text-align: center;
    background-color: lightblue;
}

table thead {
    position: sticky;
    top: 0px;
    background-clip: padding-box;
}

table td {
    /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
    border-bottom: 1px solid black;
    border-right: 1px solid black;

    text-align: center;
    white-space: nowrap;
    background-clip: padding-box;
}

table th:first-child,
table td:first-child {
    /* Apply a left border on the first <td> or <th> in a row */
    border-left: 1px solid black;
}

table thead tr:first-child th {
    border-top: 1px solid black;
    padding: 0px 10px;
    width: 300px;
}

table tbody tr:nth-child(even) {
    background-color: lightgrey;
}

JS:

var table = document.createElement("TABLE");

var header = table.createTHead();
data = document.createElement("TBODY");

var nameRow = header.insertRow(-1);
var infoRow = header.insertRow(-1);

for (let set of datasets) {
    var cell = document.createElement("th");
    cell.colSpan = 2;
    cell.innerHTML = set.label; 
    nameRow.appendChild(cell);

    cell = document.createElement("th");
    cell.innerHTML = "Aika"
    infoRow.appendChild(cell);

    cell = document.createElement("th");
    cell.innerHTML = "Arvo"
    infoRow.appendChild(cell);
    
    ...

编辑：

即使 table-layout:fixed 宽度也会被覆盖。我尝试按照 here, 的建议在 colgroup 中定义列，但这也不起作用。

Answer 1

我最终通过向 table 正文单元格添加填充并将宽度设置为任何小的值来获得固定宽度。这样页面就没有什么可挤压的了。

这是我的决赛css:

#datawrapper {
    float: left;
    width: 75%;
    height: 600px;
    margin: 20px 20px 200px;
    overflow-y: auto;
    overflow-x: auto;
}

table {
    float: left;
    border-collapse: separate; /* Don't collapse */
    border-spacing: 0;
}   

table th {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
    background-color: lightblue;
}

table thead {
    position: sticky;
    top: 0px;
}

table td {
    /* For cells, apply the border to one of each side only (right but not left, bottom but not top) */
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    text-align: center;
    white-space: nowrap;
}

table th:first-child,
table td:first-child {
    /* Apply a left border on the first <td> or <th> in a row */
    border-left: 1px solid black;
}

table thead tr:first-child th {
    border-top: 1px solid black;
    padding: 0px 10px;
    width: 100px;
}

table tbody tr:nth-child(even) {
    background-color: lightgrey;
}

table tbody td:nth-child(odd) {
    padding: 0px 50px;
}

table tbody td:nth-child(even) {
    padding: 0px 10px;
}

这看起来像：

如何阻止 html 压缩内容？

How to stop html from squeezing content?

html

css

html-table

overflow