HTML Table width in percentage, table rows separated equally

Question

When I create a table in html, a table with a width of 100%, if I want all the cells (tds) to be divided in equal parts, do I have to enter the width % for each cell? Am I \

Answer 1

This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519. In combination with table-layout: fixed I often find a great tool to make columns act as you want (see codepen here):

table {
 /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
 table-layout: fixed;
}
.fixed-width {
  width: 100px;
}
.col-12 {
  width: 100%;
}
.col-11 {
  width: 91.666666667%;
}
.col-10 {
  width: 83.333333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.666666667%;
}
.col-7 {
  width: 58.333333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.666666667%;
}
.col-4 {
  width: 33.333333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.666666667%;
}
.col-1 {
  width: 8.3333333333%;
}

/* Stylistic improvements from here */

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
table {
  width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
  padding: 8px;
  border: 1px solid gray;
}

  
     
     
     
     
  
  

    

      
Title
      
Count
      
Name
      
Single
    
  
  

    

      
This is a very looooooooooong title that may break into multiple lines
      
19
      
Lisa McArthur
      
No
    
    

      
This is a shorter title
      
2
      
John Oliver Nielson McAllister
      
Yes
    
  




  
  
    
    
    
    
  
  

    

      
Title
      
Count
      
Name
      
Single
    
  
  

    

      
This is a very looooooooooong title that may break into multiple lines
      
19
      
Lisa McArthur
      
No
    
    

      
This is a shorter title
      
2
      
John Oliver Nielson McAllister
      
Yes