CODEWITHSUNDEEP
htmlcss
Grodriguez
Grodriguez

Reputation: 21995

Fixed table layout not filling specified table width

I am using display:table with fixed table layout to show some data in a web app.

The table width is set to 100%. There are two columns, and I am explicitly setting a width on the second column. According to the spec, after the column widths are calculated, "if the table is wider than the columns, the extra space should be distributed over the columns."

However this does not seem to be working as expected when the second column is an input element. In this case, the second column retains the specified width and the first column takes 50% of the table. The extra space is not distributed over the columns, and thus the table does not fill the available width.

Here's an example; first test works as expected, second one doesn't:

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
}
.right {
  width: 200px;
}
<p>Test 1 -- works as expected</p>
<div class="row">
  <div class="cell">Label</div>
  <div class="cell right">Field</div>
</div>

<p>Test 2 -- table does not fill available width</p>
<div class="row">
  <div class="cell">Label</div>
  <input class="cell right" type="text" value="Text input" />
</div>

Am I missing something? Why is this happening, and how can I fix it?

Upvotes: 3

Views: 1379

Answers (2)

BoltClock
BoltClock

Reputation: 723538

I don't think you're missing anything. The behavior you're observing is consistent across browsers, but I can't find anything in the spec that alludes to this behavior. I thought it might have something to do with replaced elements, but in fact the spec says otherwise:

Replaced elements with these 'display' values are treated as their given display types during layout. For example, an image that is set to 'display: table-cell' will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell.

So it looks like there shouldn't be any difference in how the table is rendered. Honestly, I don't know. I could go so far as to say that every browser is getting tripped up by the presence of replaced elements, as the same behavior occurs when you use an img in lieu of an input, but I don't have enough proof to say for certain whether or not this behavior is expected.

Due to the nature of replaced elements, I don't think there is a way to fix this using just CSS. The only alternative that I can think of is to make that cell a non-replaced element such as a div in your first test case, and put the input in the non-replaced element.

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
}
.right {
  width: 200px;
}
.right input {
  width: 100%;
  box-sizing: border-box;
}
<div class="row">
  <div class="cell">Label</div>
  <div class="cell right">Field</div>
</div>

<div class="row">
  <div class="cell">Label</div>
  <div class="cell right"><input type="text" value="Text input" /></div>
</div>

Upvotes: 3

ArinCool
ArinCool

Reputation: 1738

Check this Fiddle.

In the second row, instead of 

<input class="cell right" type="text" value="Text input" />

do 

<div class="cell right"><input type="text" value="Text input" style="width: 98%;"/></div>

And change the CSS:

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.cell {
  display: table-cell;
  border: 1px solid #aaa;
    width: 50%;
}
.right {
  width: 50%;
}

Upvotes: 0

Related Questions