CODEWITHSUNDEEP
htmlcss
insomnium_
insomnium_

Reputation: 1820

Making group of columns inside table equal sized

I have a table with 8 columns inside, I know, that 3 last columns will always be 32 pixel wide, as they contain always the same content. I need to make rest 5 columns equally sized and fill the rest of the space left by fixed td's.

I have following css:

.myTable{
width:100%;
border-color:black;
border-width:1px;
}

.fixedTd{
width:32px;
}

and my markup:

<table class="myTable">
<tr>
<td>Some short content</td>
<td>Some slightly longer content inside</td>
<td>Some very very loooooooong content to show, that columns are not equally sized</td>
<td>Not so long content</td>
<td>Tiny content</td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
<td class="fixedTd"></td>
</tr>
</table>

I've tried adding table-layout:fixed; to table class, but in this case fixedTd does not override the style - all the tds become equal width.

Issue

Any ideas how to achieve the result I expect?

Upvotes: 1

Views: 429

Answers (1)

Danield
Danield

Reputation: 125651

Using your current markup... adding table-layout:fixed; works

FIDDLE

.myTable{
    width:100%;
    border: 1px solid black;
    table-layout:fixed;
}
td
{
    height: 30px;
    background: pink;
}
.fixedTd{
    width:32px;
}

Upvotes: 2

Related Questions