CODEWITHSUNDEEP
htmlcss
Pras
Pras

Reputation: 189

input box the size of the rest of the column in a table

I have a table that had a row of input boxes in it. I am have a little bit of an issue sizing the input boxes. I wanted to know if there was some way with CSS to automatically size the input box so that it is the size of the rest of the content in the column.

The input box is larger than the content in the rest of the rows i.e. it is larger than the heading the the value cell(345678). Is there some way to automatically make the input box the same size as the biggest element without being larger than it. So in this case I want to make the input box as large as the "Heading" cell and not larger. Or can I size it to the size of the value cell(345678) above it?

https://jsfiddle.net/6pzvjt4r/

<table>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
    </tr>
    <tr>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 517

Answers (2)

mplungjan
mplungjan

Reputation: 177786

If not by CSS, then by JS

let cells = [];
[...document.querySelectorAll("tbody tr:first-child td")].forEach((td,i) => {
  const w = td.offsetWidth;
  cells.push('<td><input type="text" style="width:'+w+'px" /></td>')
})
document.querySelector("tbody").innerHTML+= '<tr>'+cells.join("")+'</tr>';
td { text-align:center }
<table>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>345678</td>
      <td>345678</td>
      <td>3456781231</td>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

input has a defaut size if not set . You may then set a size down to 1 or 2 characters and override it via css with width.

possible example

input {
  width: 100%;
  display: block;/*optionnal*/
}
<table>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Head</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>345678</td>
      <td>34567</td>
      <td>123456789</td>
      <td>345678</td>
      <td>345678</td>
      <td>345678</td>
    </tr>
    <tr>
      <td><input size="2" type="text"></td>
      <td><input size="2" type="text"></td>
      <td><input size="2" type="text"></td>
      <td><input size="2" type="text"></td>
      <td><input size="2" type="text"></td>
      <td><input size="2" type="text"></td>
    </tr>
  </tbody>
</table>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size

The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

If you want the input match the size of your numbers, you will need to wrap them together.

p {
display:inline-block;
border:solid 1px tomato;
}
input {
box-sizing:border-box;
width:100%;
display:block;
}
<p>123456<input size=2 type= text></p>
<p>12345678<input size=2 type= text></p>
<p>1234567890<input size=2 type= text></p>

<p>123<input size=1 type= text></p>

Upvotes: 1

Related Questions