CODEWITHSUNDEEP
htmlcss
kaykayman
kaykayman

Reputation: 393

Table cell width is ignored depending on input width set on unrelated row

I have encountered some strange behaviour with HTML/CSS where an input element in a table row seems to drive the widths of other table cells in another table row which I don't think it should have any impact on.

table,
td {
  border: 1px solid black;
}
<table style="width: 700px;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 150px" />
    </td>
  </tr>
</table>
<br/>
<table style="width: 700px;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 350px" />
    </td>
  </tr>
</table>

In this example there are two mostly identical fixed width tables. Each has one table row containing 4 table cells (two of which have a percentage based width set), and another table row with a colspan of 4 meaning it encompasses the width of table. This last row contains a normal input text field.

On the first example, the column widths are respected.

However, on the second they are ignored.

The only difference between the examples is the width that has been set on the text field. However there is more than enough room for the text field in its row (and even if there weren't I don't think it should have any impact on the first row).

Is there a reason the tables are behaving in this way?

Upvotes: 2

Views: 1988

Answers (1)

Julio Feferman
Julio Feferman

Reputation: 2676

The default table-layout auto will size the cells based on the widest unbreakable content. This seems to be true regardless of the colspan setting. The contents of the first cell are still wide enough to require a layout adjustment.

Set your table-layout to fixed to resolve this. With fixed, the layout depends on the width of the columns and not their contents.

Please see this reference.

Here is a snippet where both tables behave the same.

table,
td {
  border: 1px solid black;
}
<table style="width: 700px;table-layout:fixed;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 150px" />
    </td>
  </tr>
</table>
<br/>
<table style="width: 700px;table-layout:fixed;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 350px" />
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions