如何让过宽的HTML表格适配屏幕宽度？

问题背景 #

现有一个包含多列的HTML表格，通过JavaScript动态生成行并填充内容后，表格超出屏幕宽度，且所有列均为必要内容无法删除，需要让表格适配屏幕显示。

原表格HTML代码 #

<table id="req_header" border="2" style="overflow: auto;">
    <tr>
        <th><i class="fa fa-solid fa-check"></i></th>
        <th>Actual amount</th>
        <th>Current reading</th>
        <th>Employee</th>
        <th>Expected amount</th>
        <th>Installment</th>
        <th>Meter current date</th>
        <th>Meter previous date</th>
        <th>Previous reading</th>
        <th>Start from</th>
        <th>Total charge</th>
        <th>Type</th>
        <th>Unit consumed</th>
    </tr>
</table>

动态生成行的JavaScript代码 #

for(let data in snapshot){
    var row = table.insertRow(table.rows.length);
    var cell = row.insertCell(0);
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);
    var cell4 = row.insertCell(4);
    var cell5 = row.insertCell(5);
    var cell6 = row.insertCell(6);
    var cell7 = row.insertCell(7);
    var cell8 = row.insertCell(8);
    var cell9 = row.insertCell(9);
    var cell10 = row.insertCell(10);
    var cell11 = row.insertCell(11);
    var cell12 = row.insertCell(12);

    var input=document.createElement("INPUT");
    input.setAttribute("type", "checkbox");
    input.style.textAlign="center";
    cell.appendChild(input);

    var input=document.createElement("INPUT");
    input.style.textAlign="center";
    input.value = snapshot[data]["index"];
    cell1.appendChild(input);

    /* and so on, I am populating my table */
}

可行解决方案 #

1. 添加横向滚动容器 #

将表格包裹在一个带横向滚动的容器中，保留表格原有宽度的同时，让用户可以通过滚动查看所有列，这是最直接的方案：

<div style="overflow-x: auto; width: 100%;">
  <table id="req_header" border="2">
    <!-- 表格内容 -->
  </table>
</div>

2. 优化单元格样式压缩空间 #

通过调整单元格的内边距、字体大小和换行规则，减少每列的占用宽度：

#req_header th, #req_header td {
  padding: 4px 8px; /* 减小内边距，默认通常是8px以上 */
  font-size: 0.9em; /* 适当缩小字体，不影响可读性 */
  word-break: break-all; /* 长文本自动换行，避免列被过度拉长 */
  text-align: center;
}
/* 合并边框减少额外宽度 */
#req_header {
  border-collapse: collapse;
}

3. 固定表格布局分配列宽 #

使用table-layout: fixed让表格按比例分配列宽，也可以手动指定关键列的宽度，确保表格占满容器：

#req_header {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
/* 给复选框列指定固定窄宽度 */
#req_header th:first-child, #req_header td:first-child {
  width: 40px;
}
/* 可根据需求给其他列设置合适宽度 */
#req_header th:nth-child(2), #req_header td:nth-child(2) {
  width: 100px;
}

4. 适配动态生成的输入框 #

确保动态创建的输入框不会超出单元格宽度，调整输入框样式：

// 创建输入框时添加以下样式
input.style.maxWidth = "100%";
input.style.width = "90%";
// 示例：修改复选框所在输入框
var input=document.createElement("INPUT");
input.setAttribute("type", "checkbox");
input.style.textAlign="center";
input.style.maxWidth = "100%";
cell.appendChild(input);

内容的提问来源于stack exchange，提问作者user21270629