CODEWITHSUNDEEP
css
MShack
MShack

Reputation: 652

How to set fixed width of td within a fixed table layout

I have been unsuccessful trying to set a width of the first td/th cell within a table using table layout fixed

https://jsfiddle.net/4m5vf9zb/101/

#standings  {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0 auto;
}
#division00,#division01 {
    display: table-cell;
    vertical-align: middle;
}
.standingslogo {
    display: block;
    max-width: 100%;
    margin:0 auto;
}
th.ficonname{
    width: 400px;
}

Upvotes: 0

Views: 84

Answers (2)

LcSalazar
LcSalazar

Reputation: 16831

The only CSS way to solve this is to remove the fixed layout.

Updated Fiddle

#standings  {
    display: table;
    width: 100%;
    margin: 0 auto;
}

Why?

Because in a fixed layout, the column's width is defined by the measures of the cells in the first row. The other rows are ignored:

From MDN:

fixed
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

Upvotes: 1

Jeff Clarke
Jeff Clarke

Reputation: 1397

use a colgroup element to set the width of your columns.

Example: https://jsfiddle.net/4m5vf9zb/102/

Upvotes: 1

Related Questions