0

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.

enter image description here

Samuel
  • 388
  • 5
  • 15

2 Answers2

0

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>
BeerusDev
  • 1,444
  • 2
  • 11
  • 30
  • We should not use inline styles as much as possible it is not recommended. – Ishtiaq Jul 23 '21 at 18:14
  • @Ishtiaq it is *more to maintain*, when using a lot of HTML/code. In this example, the OP asked for one row of a table , hence I used inline css. It produces the exact same output. – BeerusDev Jul 23 '21 at 18:19
0

What I could understand, you can achieve this by applying styles with table i.e 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.

m4n0
  • 29,823
  • 27
  • 76
  • 89
Ishtiaq
  • 238
  • 1
  • 2
  • 9