CODEWITHSUNDEEP
htmlcsshtml-table
Ivan Silantyev
Ivan Silantyev

Reputation: 11

Same column width under colspan

How can I make columns under colspan of same width?

I have table header like in example.

<html>
<head>
<style>td {border: solid 1px black;}</style>
</head>
<body>
<table style="width: 100%;border-collapse: collapse;">
    <tr>
        <td rowspan="2">Some header columns or even several(big or small)</td>
        <td colspan="4">pre-defined number of undercolumns</td>
    </tr>
    <tr>
        <td>1</td><td>11</td><td>111</td><td>1111</td>
    </tr>
    <tr>
        <td>data_row</td><td>4444</td><td>333</td><td>22</td><td>1</td>
    </tr>
</table>
</body>
</html>

I have created a jsFiddle that demonstrates this.

Potentially the number of columns (to make same width) could be different. Changing the table-layout to fixed is not a solution in my case because of existence of other columns. I can not make them with fixed width since not sure of data content length. I also can not do them with percent width since it is percent of all table, but not column group.

Upvotes: 1

Views: 1732

Answers (1)

E.Agolli
E.Agolli

Reputation: 550

You can try this:

td {
    border: solid 1px black;
    width: calc(100%/5);
}

And you can divide the width as many columns as you have.

Upvotes: 2

Related Questions