如何阻止 html 压缩内容？

Posted 2023-03-06

【中文标题】如何阻止 html 压缩内容？

【英文标题】：How to stop html from squeezing content?

【发布时间】：2021-11-05 00:23:22

【问题描述】：

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

它会用足够的内容停止挤压，因为我的表格主体的列上有一个white-space: nowrap; 属性，但我希望表格标题最多换行一次。我试图在网上查看是否可以将包装限制为最多一次，并发现：

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

但即使内容被压缩，也会被覆盖。我想完全停止在我的 div 中的挤压，但所有此类解决方案似乎都适用于弹性盒子，而我以前没有使用过这些解决方案。

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

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 中定义列，但这也不起作用。

【问题讨论】：

你在用table-layout:fixed

如果您不包含与您的问题相关的所有 CSS 和 HTML 代码，则很难发现问题。请确保在发布问题时始终包含所有代码。

@Ken 我现在已经包含了我的 css 和 js。

@Alvaro Menéndez 我现在是。这并没有解决它，但我正在寻找原因。谢谢。

【参考方案1】：

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

这是我最后的 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;

这看起来像：