HTML table with fixed col width broken when cell content is an input element

Question

I have legacy code which I'm trying to improve step by step.

At some point I have a table with table-layout: fixed. And a colgroup element defining the size of each column.

The problem is that the column sizes are not correct when the cell's content is an input element.

You can check with this code snippet where the first column should be 20px. http://jsfiddle.net/ppRgV/158/

What would be a good solution to not define a specific size on the input element?

The input bring default width, set this on your css - input{ width: 100%; } — Luís P. A.
– Luís P. A., Commented Aug 9, 2017 at 11:35

Sankar · Accepted Answer · 2017-08-09 11:37:35Z

1

Try this...

Just set the width to the first column's input element.

.RowHeader {
  background-color: black;
}

.GroupCaption {
  background-color: #868981;
}

.RecordPlusCollapse {
  background-color: red;
}

.RowHeader input {
  width: 100%;
}

.Table {
  table-layout: fixed;
}

<table id="Grid1_Table" class="Table">
  <colgroup>
    <col style="width:20px">
    <col style="width:20px">
    <col style="width:180px">
    <col style="width:200px">
  </colgroup>
  <tbody>
    <tr>
      <td class="RowHeader">
        <div><input></div>
      </td>
      <td class="RecordPlusCollapse">
        <div>&nbsp;</div>
      </td>
      <td colspan="2" class="GroupCaption">Order ID: 0 - 1 Items</td>
    </tr>
  </tbody>
</table>

answered Aug 9, 2017 at 11:37

Sankar

7,1772 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johannes · Accepted Answer · 2017-08-09 11:57:00Z

0

It works if you add the following CSS rule:

.RowHeader div {
    width:20px;
    overflow-x: hidden;
}

See fiddle: http://jsfiddle.net/n5obvd4s/1/

answered Aug 9, 2017 at 11:57

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

HTML table with fixed col width broken when cell content is an input element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related