时间戳

首页 > 解决方案 > CSS 表格列宽不适合某些屏幕尺寸

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

问题描述

我正在使用 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>

标签： htmlcss

解决方案

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

推荐阅读