CODEWITHSUNDEEP
htmlcss
Flash Thunder
Flash Thunder

Reputation: 12036

Make table cells equal size (width/height) not counting headers

How do I force table to take some space for headers (vertical and horizontal) and make all other cells (<td>) equal size no matter what?

<table>
  <tr>
    <th></th><th...
  </tr>
  <tr>
    <th></th><td...
  </tr>
  <tr...
</table>

JSFiddle here

Would like all grey squares to have same size... any way to do it via CSS?

Upvotes: 1

Views: 2739

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

For cell of equal size add this rule

table  {
    table-layout: fixed;
}

Further information on MDN

If you also need to reduce the height of your cells just remove height=100% from the table and set an height to the <th> elements

Upvotes: 6

Related Questions