HTML table: percentage of column width

Question

I have a table with 7 columns. I want the columns to have the following width:

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

I created 2 CSS classes, one per width, and assign them to each cell.

What I have and it does not work. Instead, width always wraps the content. If I just put one letter, the width will be very small, if I overlap a large string, the width will be too large. I want him to be permanent.

CSS and HTML:

 table { width: 100%; } .ten { width: 10% } .twenty { width: 20%; } 

 <table> <tr> <th class="ten">H1</th> <th class="ten">H2</th> <th class="ten">H3</th> <th class="twenty">H4</th> <th class="twenty">H5</th> <th class="twenty">H6</th> <th class="ten">H7</th> </tr> <tr> <td class="ten">A1</td> <td class="ten">A2</td> <td class="ten">A3</td> <td class="twenty">A4</td> <td class="twenty">A5</td> <td class="twenty">A6</td> <td class="ten">A7</td> </tr> <tr> <td class="ten">B1</td> <td class="ten">B2</td> <td class="ten">B3</td> <td class="twenty">B4</td> <td class="twenty">B5</td> <td class="twenty">B6</td> <td class="ten">B7</td> </tr> </table> 

Can someone explain how to achieve what I want?

Answer 1

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

You can also use colgroup and col tags to immediately assign width and bg to 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); } 

 <table> <colgroup> <col class="ten" /> <col class="ten" /> <col class="ten" /> <col class="twenty" /> <col class="twenty" /> <col class="twenty" /> <col class="ten" /> </colgroup> <tr> <th>H1</th> <th>H2</th> <th>H3</th> <th>H4</th> <th>H5</th> <th>H6</th> <th>H7</th> </tr> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> <td>A5</td> <td>A6</td> <td>A7</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> <td>B4</td> <td>B5</td> <td>B6</td> <td>B7</td> </tr> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> <td>A5</td> <td>A6</td> <td>A7</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> <td>B4</td> <td>B5</td> <td>B6</td> <td>B7</td> </tr> </table> 

Answer 2

Your CSS works as expected, so that the width of the table headers and cells is correct. But:

th defaults to text-align: center, but the td element does not.

So you have to add either to td or to the same text alignment. For instance:.

 th { text-align: left; } 

Answer 3

Add this to your CSS

 td { word-break: break-all; //or word-wrap: break-word; } 

word-break: break-all; completes long words in the next line, but will contain individual words in their entirety

 max-dimension 

will become

 max- dimension 

For now, word-wrap: break-word will disable the word anywhere until it matches the cell.

 max-dimension 

can be

 max-dim ension