Adjust HTML table colum size both with percent and fixed sizes?

Question

I want to create a table with the following widths of columns.

Is it possible to use both percents and absoulte widths as shown in my graphic?

This is because some columns make no sense below a certain width and always need the same width and others are more flexible.

Answer 1

Here you go:

 #fixed{ table-layout:fixed; } td{ border:1px solid red; } td:nth-child(even){ background-color: grey; }

 <table id="fixed" border="0" style="width:100%;border-collapse:collapse;"> <tr> <td style="width:50px;">1</td> <!--Fixed width--> <td style="width:50%">Title</td> <td style="width:50%">Interpret</td> <td style="width:20px">1</td> </tr> </table>

Answer 2

What I could understand, you can achieve this by applying styles with table ie table-layout: fixed; and width:100%; . Also width of td using px and % . According to your design, you are using four columns and I wrote code for the four columns; Following would be your CSS;

 table { table-layout: fixed; width: 100%; } td:first-child { width: 50px; } td:last-child { width: 20px; } .second-column { width: 50%; } .third-column { width: 50%; } td:nth-child(odd) { background-color: grey; } td:nth-child(even) { background-color: silver; }

 <table> <tr> <td>1</td> <td class="second-column">2</td> <td class="third-column">3</td> <td>4</td> </tr> </table>

Hope this is what you required.