[英]HTML Table with 1 shrinking column and multiple fixed width columns with text input
I have an HTML table where column 1 is product name and the other columns 2-6 are price, quantity etc which are all numerical. 我有一个HTML表,其中第1列是产品名称,其他列2-6是价格,数量等都是数字。 Table's own with is 100%.
表格自带100%。
Each cell has an input element for data entry. 每个单元都有一个用于数据输入的输入元素。
The columns 2-6 width should always match content, price,quantity etc must be visible at all times. 列2-6宽度应始终匹配内容,价格,数量等必须始终可见。 I expect these fields to grow/shrik as user types in values.
我希望这些字段随着用户在值中的类型而增长/ shrik。
Column 1 (name) is text. 第1列(名称)是文本。 As far as I am concerned its content can be wrapped and shrinked to width of 1px.
就我而言,它的内容可以被包装并缩小到1px的宽度。
How can I create such a table? 我怎样才能创建这样的表格? I just got more confused after googling for an hour.
谷歌搜索了一个小时后,我变得更加困惑。
Here is a jsfiddle: https://jsfiddle.net/n682xeru/2/ . 这是一个jsfiddle: https ://jsfiddle.net/n682xeru/2/。 Entering values in quantity column does not cause the column to grow.
在数量列中输入值不会导致列增长。
<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>
You can set table width to 100% and td width will calculate automatically. 您可以将表格宽度设置为100%,td宽度将自动计算。 Then you can set width to td tag witch you want fixed.
然后你可以将宽度设置为你想要修复的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.