Home / Questions / 227331
Accepted
Shassain
Asked: 2020-01-05 11:10:52 +0800 CST 2020-01-05 11:10:52 +0800 CST

How to change the size of an input inside a td?

  • 772

I have the following code

<table style="min-width:70%; font-size:12px;">
    <tr style="background:#BDBDBD">
        <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">&#36;us Pto.</th>
        <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo en &#36;us</th>
        <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">costo en Bs.</th>
        <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo Por Tonelada</th>
    </tr>
    <tr>
        <td style="border:1px solid #000;text-align:center" >Zn</td>
        <td style="border:1px solid #000;text-align:center" ><input size="7" style="text-align:center" type="text"></td>
        <td style="border:1px solid #000;text-align:center" >Zn</td>
        <td style="border:1px solid #000;text-align:center" ><input size="7" style="text-align:center" type="text" readonly></td>
        <td style="border:1px solid #000;text-align:center" >Zn</td>
        <td style="border:1px solid #000;text-align:center" ><input size="7" style="text-align:center" type="text" readonly></td>
        <td style="border:1px solid #000;text-align:center" ><input size="7" style="text-align:center" type="text" readonly></td>
        <td style="border:1px solid #000;text-align:center" ><input size="7" style="text-align:center" type="text" readonly></td>
        </tr>
</table>

As you can see , the ones inputinside a tdhave a size that leaves spaces to the left and right of the , I achieved this with the input tdattribute .size

But I want the inputs to occupy 100% of the td, so my question is:

How to make an input occupy 100% of a td?

html

1 Answers

  1. Best Answer

    As they mentioned in the comments you can use width: 100%but this will not work well if you do not change the box-sizinga border-boxbecause the default value content-boxmakes the calculation not correct as you can check here

    <table style="min-width:70%; font-size:12px;">
  <tr style="background:#BDBDBD">
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">&#36;us Pto.</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo en &#36;us</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">costo en Bs.</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo Por Tonelada</th>
  </tr>
  <tr>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width: 100%" type="text"></td>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
  </tr>
</table>

    Putting it to the inputs already calculates it correctly

    input {
  box-sizing: border-box;
}
    <table style="min-width:70%; font-size:12px;">
  <tr style="background:#BDBDBD">
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">&#36;us Pto.</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo en &#36;us</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">costo en Bs.</th>
    <th style="border:1px solid #000;text-align:center" width="25%" colspan="2">Costo Por Tonelada</th>
  </tr>
  <tr>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width: 100%" type="text"></td>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center">Zn</td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
    <td style="border:1px solid #000;text-align:center"><input style="text-align:center; width:100%" type="text" readonly></td>
  </tr>
</table>

    This reset is widely used to apply this correction to all elements but it can affect a layout that is already established. The ideal is to start building it with the reset applied from the beginning

    *, *::before, *::after {
    box-sizing: border-box;
}

    This is one of the changes that Bootstrap applies by default when you include it on your site.

    • 5