Question

我正在尝试修复HTML表格单元格的宽度。假设连续5个单元格中都有相同的宽度，如果添加新单元格，宽度应该相同但水平滚动条应该到来。 Here是W3school正在尝试的例子。请帮我解决这个问题。在这个例子中可以看到，在添加了大约12到15个单元格之后，单元格大小正在减少，在添加更多单元格之后，滚动条将会出现。

这是我的css，我尝试过：

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
word-break: break-all;
}

td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
    width: 65%;
    margin-bottom: 50px;
}
tr:nth-child(even) {
    background-color: #dddddd;
}

Answer 1

css：

table, td {
    border: 1px solid black;
    min-width: 80px;
    overflow: auto;
}

或

table, td {
    border: 1px solid black;
}
#myRow > td {
    min-width: 80px;
    overflow: auto;
}

在你的情况下：

table {
/* width must auto or none */
width:auto;
font-family: arial, sans-serif;
border-collapse: collapse;
table-layout: fixed;
word-break: break-all;
}

#myRow > td {
    border: 1px solid black;
    min-width: 80px;
    overflow: auto;
}

Answer 2

这里我是如何解决你的问题的，这里是它的工作演示。你可以运行并检查它是否正常工作。

如果你给css像

table{
width:100%;
}

然后这变得太脏了，因为它将整个表格大小分成100％，所以出现了<th>中的滚动。

function myFunction() {
    var row = document.getElementById("myRow");
    var x = row.insertCell(0);
    x.innerHTML = "New cell";
}

table, td {
    border: 1px solid black;
     min-width: 90px;
     overflow:auto;
}

<p>Click the button to insert new cell(s) at the beginning of the table row.</p>

<table>
  <tr id="myRow">
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    <td>fourth cell</td>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
    <td>fourth cell</td>
   <td>Second cell</td>
    <td>Third cell</td>
    <td>fourth cell</td>
    </tr>
  </table>
<button onclick="myFunction()">Try it</button>

如何修复HTML表格单元格宽度？

2 个答案: