html - 按百分比分配单元格空间时水平滚动不起作用

Question

我试图显示占据可用屏幕宽度的两个文本部分，并希望在调整屏幕大小时自动调整这些部分的大小。

我可以通过将宽度指定为百分比来实现这一点。但是，当该部分内的文本超过该部分的可用宽度时，它会调整大小并且不再遵循分配的百分比。

请参阅以下代码段:如果我删除 white-space: nowrap，它会正确显示使用百分比的部分，但不会显示滚动条，并且会换行文本。

如果我以像素为单位分配宽度，效果很好，但我不能那样做，因为在我的应用程序中，窗口是可调整大小的，应该为不同的显示器调整内容的大小。

我期望的效果是:

• 文本不应换行，但应可水平滚动
• 各部分应按百分比(35%、65%)占据屏幕宽度

我怎样才能做到这一点？

.Area {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid;
  height: 50px;
  font-family: "Courier New", Courier, monospace
}
html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif
}

<table width="100%">
  <tr>
    <td style="width:35%;">
      <div class="Area" id="Area1">
        hello friends this is cell 1 line 1<br>
        hello friends this is cell 1 line 2<br>
        hello friends this is cell 1 line 3<br>
      </div>
    </td>
    <td style="width:65%;">
      <div class="Area" id="Area2">
        hello friends this is cell 2 line 1<br>
        hello friends this is cell 2 line 2<br>
        hello friends this is cell 2 line 3<br>
      </div>
    </td>
  </tr>
</table>

Answer 1

您需要将 table-layout:fixed 添加到您的表格中，否则您的表格将始终尝试调整大小以适应其内容:

table {table-layout:fixed;}
.Area {
  width:100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: scroll;
  border: 1px solid;
  height: 50px;
  font-family: "Courier New", Courier, monospace
}
html, body {
  height: 100%;
  font-family: Arial, Helvetica, sans-serif
}

<table width="100%">
  <tr>
    <td style="width:35%;">
      <div class="Area" id="Area1">
        hello friends this is cell 1 line 1<br>
        hello friends this is cell 1 line 2<br>
        hello friends this is cell 1 line 3<br>
      </div>
    </td>
    <td style="width:65%;">
      <div class="Area" id="Area2">
        hello friends this is cell 2 line 1<br>
        hello friends this is cell 2 line 2<br>
        hello friends this is cell 2 line 3<br>
      </div>
    </td>
  </tr>
</table>

可在此处找到更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout