CSS table column widths not fitting certain screen sizes

Question

I am using a table-layout: fixed table to set percentage widths of columns, but for some reason the columns don't span the width of the table for certain screen sizes - 1300px and up to be exact. The percentages (not exact here) add up to 100% and the columns fit the table under 1300px. Anyone know how to make it work for all screen sizes?

Shrinking the column width for the largest column makes it wider at the large screen sizes, no idea why. And if I do that the percentages don't add up to 100%, and doesnt seem to fit any rhyme or reason that I could generate the percentages mathematically.

here is the general 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>

JiniHendrix JiniHendrix · Accepted Answer · 2021-04-06T16:25:06

It was because the element was being set to display: block. I was doing this to make the table have a static height and scroll. I fixed it by just putting it inside a div that has the height and scroll behavior.

CSS table column widths not fitting certain screen sizes

1 Answers