CSS 表格列宽不适合某些屏幕尺寸

Posted 2023-03-05

【中文标题】CSS 表格列宽不适合某些屏幕尺寸

【英文标题】：CSS table column widths not fitting certain screen sizes

【发布时间】：2021-07-02 10:58:20

【问题描述】：

我正在使用 table-layout: fixed table 来设置列的百分比宽度，但由于某种原因，对于某些屏幕尺寸，列不跨越表格的宽度 - 1300 像素，准确地说。百分比（此处不准确）加起来为 100%，并且列适合 1300 像素以下的表格。有谁知道如何使它适用于所有屏幕尺寸？

缩小最大列的列宽使其在大屏幕尺寸下变宽，不知道为什么。如果我这样做，则百分比加起来不会达到 100%，并且似乎不符合我可以通过数学方式生成百分比的任何押韵或理由。

这里是通用的html/css

<style>
 table 
  display: block;
  height: 272px;
  overflow-y: auto;
  table-layout: fixed;
  width: 100%
 

 .th1 
  width: 29.41%;
 

 .th2 
  width: 17.64%;
 
</style>

<table>
 <thead>
  <tr>
   <th class='th1'>header1</th>
   <th class='th2'>header2</th>
   <th class='th2'>header3</th>
   <th class='th2'>header4</th>
   <th class='th2'>header5</th>
  </tr>
 </thead>
 <tbody>
   ...stuff
 </tbody>
</table>

【参考方案1】：

这是因为元素被设置为显示：块。我这样做是为了使表格具有静态高度和滚动。我只是将它放在具有高度和滚动行为的 div 中来修复它。