HTML Table with 1 shrinking column and multiple fixed width columns with text input
Question
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. Table's own with is 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. I expect these fields to grow/shrik as user types in values.
Column 1 (name) is text. As far as I am concerned its content can be wrapped and shrinked to width of 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/ . 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>
1 answers
solution1
0 2019-04-17 11:55:00
You can set table width to 100% and td width will calculate automatically. Then you can set width to td tag witch you want fixed.
<html>
<head>
</head>
<body>
<table border=1 style="width: 100%;">
<tr>
<td style="width: 30px">d</td>
<td>d</td>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.