slowpoke123 slowpoke123 - 2 months ago 6
CSS Question

How do I make a td element the same width as the input element within?

I have a table consisting of a lot of input elements inside td elements.

<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
</tbody>
</table>


The width of the input elements should be 20px. The width of the table is set to 100%. The input element in the first td should only have a min-width set so it will strech out (since the table has 100% width). I want the other inputs to have a fixed width (20px). When I do this the td elements has a much larger width than the input elements:

https://jsfiddle.net/cbzuwyrg/

Is it possible to make the td elements the same width as the input elements without setting the same width in css?

This fiddle shows what I want to achieve, but without having to set the width of the td to 20px:
https://jsfiddle.net/cbzuwyrg/1/

Answer

I guess this will work with you too

table {
  width:100%;
  border-collapse: collapse;
}

td {
   border: 1px solid #000;
   }
td.first{
 width:auto;
}


input.inputwidth{
  width:60%;
}
<table>
<tbody>
  <td class="first">
    <div>
      <input type="text"size="10" /> 
    </div>
  </td>
  <td>
    <div>
      <input type="text" class="inputwidth"/> 
    </div>
  </td>
  <td>
    <div>
      <input type="text"  class="inputwidth"/> 
    </div>
  </td>
  <td>
    <div>
      <input type="text"  class="inputwidth" /> 
    </div>
  </td>
</tbody>
</table>

The code is html and CSS no JavaScript were used .

Comments