HTML table: column width percentage

Question

I have a table with 7 columns. I want the columns to be of the following widths:

• 3 columns x width=20%
• 4 columns x width=10%

Answer 1

To fixe width, you can use table-layout:fixed; .

You may also want to use the colgroup and col tags to assign at once width and bg to your columns.

table {
  width: 100%;
  table-layout: fixed;
}
.ten {
  width: 10%;
  background: tomato;
}
.twenty {
  width: 20%;
  background: turquoise
}
/* see me */
td {
  border: solid;
}
/* play with bg cells and cols ? */

tr:nth-child(even) :nth-child(odd) {
  background:rgba(100,255,50,0.3);
  }
tr:nth-child(odd) :nth-child(even) {
  background:rgba(255,255,255,0.3);
  }

  
    
    
    
    
    
    
    
  
  

    
H1
    
H2
    
H3
    
H4
    
H5
    
H6
    
H7
  

  

    
A1
    
A2
    
A3
    
A4
    
A5
    
A6
    
A7
  

  

    
B1
    
B2
    
B3
    
B4
    
B5
    
B6
    
B7
  
 

    
A1
    
A2
    
A3
    
A4
    
A5
    
A6
    
A7
  

  

    
B1
    
B2
    
B3
    
B4
    
B5
    
B6
    
B7