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. E.g.:

th {     text-align: left; }