Adjust column width to content, only one column will extend to table width

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:

  1. If the quantity is bigger than the allowed width, it will overflow
  2. 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>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum