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%

I have created 2 CSS classes, one per width and I am assigning them to each cell.

The thing I have, and that does not work is this. Instead, the width always wraps the content. If I just put one letter, than the width will be very small, if I put large string, the width will be too big. I want it constant.

CSS & 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>

Could someone explain how to achieve what I want?

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); } 

 <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, in a way that the widths of the table heads and cells are correct. However:

th by default have text-align: center applied, while the td element has not.

So you should add either to the td or th the same text alignment. Eg:

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; wraps long words to the next line, but will keep single words whole

max-dimension

will become

max-
dimension

While word-wrap: break-word will cut off a word an any place as long as it will fit the cell.

max-dimension

could become

max-dim
ension