0

我目前正在与：

#t{
    display:block;
    width:100%;
    text-align:center;
    border-collapse:collapse;
    border:1px solid black;
    position:relative;
    overflow-x: auto;
    white-space: nowrap;
}
/*   not really needed  / tried this approach and it failed
#t > tbody{
    display:block;
    width:auto;
    min-width:100%;
}
#t > tbody > tr{
    width:100%;
    min-width: 100%;
}
*/
#t tr,#t th,#t td{
    padding:clamp(0.5rem,1.4vmin,2rem);
}

仅从代码中，您可能会看到我要完成的工作，但我会澄清一下：

  1. 在任何设备宽度下，表格都应为 100% 宽
  2. 在任何设备宽度下，表格单元格都应均匀拉伸以填充
  3. 在内容不适合的设备宽度处，表格应该 overflow-x:auto 以便（例如）垂直移动用户可以滚动表格

我一直在搞乱 table display:block 看起来不错并且可以在低宽度设备上工作，但是它在第 2 点上失败了

关闭显示：块我可以让它在桌面上很好地工作，但是当调整大小时它会失败 #3

我不能为此使用媒体查询，因为表格宽度是随机的（可能仍需要在桌面上滚动，或者可能只是 2 个小列）+ 媒体查询真的很糟糕

谁能告诉我我做错了什么/指出我正确的方向？非常感谢！

4

1 回答 1

0

table-layout: fixed将驯服某些表行为，为您提供更多控制权。如果设置它的宽度<th>将被遵守 - 可以是 4 列width: 25%等等。此外，您也可以选择排除所有、一些或不排除列宽。由于表格需要在屏幕的边缘到边缘，请考虑使用vw而不是%在表格宽度上。

将以下内容添加到表中：

  table-layout: fixed;
  width: 100vw; /* vw is viewport width */

注意：HTML 已缩小

:root {
  font: 1ch/1 'Segoe UI';
}

body {
  font-size: 3ch;
}

table {
  table-layout: fixed;
  width: 100vw;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid black;
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

tr,
th,
td {
  padding: clamp(0.5rem, 1.4vmin, 2rem);
}

th {
  width: 25%;
}
<table><thead><tr><th>TH<th>TH<th>TH<th>TH<tbody><tr><td>CONTENT<td>CONTENT<td>CONTENT<td>CONTENT<tr><td>CONTENT<td>CONTENT<td>CONTENT<td>CONTENT<tr><td>CONTENT<td>CONTENT<td>CONTENT<td>CONTENT<tr><td>CONTENT<td>CONTENT<td>CONTENT<td>CONTENT</table>

于 2022-01-18T19:11:03.690 回答