html - 具有 1 个缩小列和多个带文本输入的固定宽度列的 HTML 表格
问题描述
我有一个 HTML 表,其中第 1 列是产品名称,其他第 2-6 列是价格、数量等,它们都是数字。表的自带是 100%。
每个单元格都有一个用于数据输入的输入元素。
2-6 列的宽度应始终与内容匹配,价格、数量等必须始终可见。我希望这些字段随着用户输入值而增长/缩小。
第 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>
解决方案
您可以将表格宽度设置为 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>
推荐阅读
- javascript - 在服务器端 javascript 上集成 CSS 的方法是什么?
- webmethods - 输入列表 Web 方法的流程步骤
- python - 无法在离线 CentOS7 服务器中安装 mysqlclient 并显示错误消息“此平台上不受支持的轮子”
- c++ - sfml 不再编译
- android - 构建 apk 发布时将 Gif 文件大小调整为 0
- python - 在scala中进行日期到字符串转换的字符串插值
- javascript - Vue3 反应值未按预期更新
- python - 如何从 StringField 中拆分数据
- python - Python递归二叉搜索树
- python - 安装依赖项时是否可以指定conda通道地址