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

如何更改 td 内输入的大小？

  • 772

我有以下代码

<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>

正如你所看到的， inputa 里面的那些td有一个在 左右两边留有空格的大小，我通过inputtd属性实现了这一点。size

但我希望inputs 占据 100% td，所以我的问题是：

如何使输入占用 100% 的 td？

html

1 Answers

  1. Best Answer

    正如他们在评论中提到的那样，您可以使用width: 100%，但如果您不更改box-sizinga ，这将无法正常工作，border-box因为默认值content-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>

    将其放入输入已经可以正确计算

    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>

    此重置广泛用于将此更正应用于所有元素，但它可能会影响已建立的布局。理想的情况是从一开始就应用重置来开始构建它

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

    这是当您将Bootstrap包含在您的网站上时默认应用的更改之一。

    • 5