带有1个缩小列的HTML表和带有文本输入的多个固定宽度列

Question

我有一个HTML表，其中第1列是产品名称，其他列2-6是价格，数量等都是数字。 表格自带100％。

每个单元都有一个用于数据输入的输入元素。

列2-6宽度应始终匹配内容，价格，数量等必须始终可见。 我希望这些字段随着用户在值中的类型而增长/ shrik。

第1列（名称）是文本。 就我而言，它的内容可以被包装并缩小到1px的宽度。

我怎样才能创建这样的表格？ 谷歌搜索了一个小时后，我变得更加困惑。

这是一个jsfiddle： https ：//jsfiddle.net/n682xeru/2/。 在数量列中输入值不会导致列增长。

<html>
  <head>
  </head>
  <body>
    <table border=1 style="width: 100%;">
      <thead>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Discount</th>
        <th>Total</th>
      </thead>
      <tr>
        <td style="width: 100%"><input style="width:100%" type="text" id="name" name="name" required
       ></td>
        <td><input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="100"></td>
        <td> <input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="22444444423423"></td>
        <td><input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="10%"></td>
        <td>160</td>
      </tr>
      <tr>
        <td><input style="width:100%" type="text" id="name" name="name" required
       ></td>
        <td><input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="10000.000"></td>
        <td style="min-width: min-content;"><input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="4"></td>
        <td><input style="width:100%" type="text" id="name" name="name" required minlength="1" maxlength="16" value="10%"></td>
        <td>16000.000</td>
      </tr>
    </table>
  </body>

</html>

Answer 1

您可以将表格宽度设置为100％，td宽度将自动计算。 然后你可以将宽度设置为你想要修复的td标签。

<html>
  <head>

  </head>
  <body>
<table border=1 style="width: 100%;">
  <tr>
    <td style="width: 30px">d</td>
    <td>d</td>
  </tr>
</table>
  </body>
</html>

带有1个缩小列的HTML表和带有文本输入的多个固定宽度列

问题描述

1 个解决方案

解决方案1
0 2019-04-17 11:55:00

带有1个缩小列的HTML表和带有文本输入的多个固定宽度列

问题描述

1 个解决方案

解决方案1 0 2019-04-17 11:55:00

解决方案1
0 2019-04-17 11:55:00