I would like to format a table in HTML/CSS according to these rules:
- Some columns have a minimum width
- Some columns will have width adjusted to the content
- One column will adjust its width to the remaining width
In the following example I have two issues:
- If the quantity is bigger than the allowed width, it will overflow
- The
Reference
column is not adjusted to the content
How can I fix this?
.content {
position: absolute;
left: 50px;
top: 50px;
width: 1000px;
border: 1px solid black;
}
table {
position: absolute;
width: auto;
line-height: 1.254;
border-collapse: collapse;
}
tr>th {
padding-left: 1mm;
padding-right: 1mm;
padding-bottom: 0.5mm;
}
tr>td {
padding-left: 1mm;
padding-right: 1mm;
padding-bottom: 0.5mm;
font-size: 80%;
}
tr th:nth-child(1) {
border-right: solid 0.5px black;
}
tr th:nth-child(3) {
border-left: solid 0.5px black;
}
tr th:nth-child(4) {
text-align: right;
border-left: solid 0.5px black;
}
tr th:nth-child(5) {
text-align: right;
border-left: solid 0.5px black;
}
tr td:nth-child(1) {
width: 6mm;
border-right: solid 0.5px black;
}
tr td:nth-child(2) {
text-align: left;
}
tr td:nth-child(3) {
border-left: solid 0.5px black;
}
tr td:nth-child(4) {
width: 8mm;
text-align: right;
border-left: solid 0.5px black;
}
tr td:nth-child(5) {
text-align: right;
width: 15mm;
border-left: solid 0.5px black;
}
<html>
<body>
<div>
<table class="content">
<tr>
<th>Pos.</th>
<th>Description</th>
<th>Reference</th>
<th>Qty.</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>IC GATE NAND 4CH 2-INP 14DIP CD74HCT00E</td>
<td>1514-2N2222APBFREE-ND</td>
<td>20</td>
<td>40.95</td>
</tr>
</table>
</div>
</body>
</html>