HTML Table, first and last column fixed width and columns between dynamic, but equal width

Question

Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the

Answer 1

Try using the pseudo element first-child and last-child

If I'm not mistaken the other columns will align equally by themselves. You might need to use the !important statement behind the first-child and last-child widths.

table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }

    

      
100px
      
some text
      
some text
      
100px
    

However, as nurettin pointed out, if you use a thead and tbody section you have to style the header. Styling the td:first-child and td:last-child will not work.

table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
th:first-child{ width: 100px; }
th:last-child{ width: 100px; }

  

    

      
Column 1
      
Column 2
      
Column 3
      
Column 4
    
  
  

    

      
100px
      
some text
      
some text
      
100px