Make Arbitrary Table Column Width Equal to Space Available - html

Question

The scenario is I want a table column to consume all of the available with -- nothing more and nothing less. This is similar to using table td:last-child{width:100%} except the column many not be the last.
My sample code below demonstrates what I have so far.
The first table shows the result when the data fits comfortably.
The second table shows what happens when the column whose width I want to vary has too much data. What it does is it pushes the last column over. What I want it to do is to have a width still equal to the available space after accounting for the other columns and for the excess text to be treated as overflow, which means it should be hidden.
Please note that in the real-life scenario the table can be resized, so any solution that relies on setting the columns width to a value or percentage will probably not suffice.
Thanks in advance for any assistance.
<style>
.container {
position: relative;
width: 500px;
height: 200px;
display: inline-block;
font: 16px arial;
border: 1px solid steelblue;
background-color: lightgoldenrodyellow;
}
.variCell {
text-align: left;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.orderCell {
display: inline-block;
width: 65px;
text-align: right;
}
table {
position: absolute;
display: block;
margin-right: 10px;
border: none;
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
}
thead {
position: relative;
display: table-header-group;
height: 25px;
max-height: 25px;
background-color: #93aed2;
text-align: center;
font-size: 14px;
line-height: 25px;
white-space: nowrap;
}
tbody {
position: relative;
border: none;
overflow: hidden;
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
</style>
<div class="container">
<table>
<thead>
<tr>
<td class="orderCell">
Col 1
</td>
<td class="variCell">
Col 2
</td>
<td class="orderCell">
Col 3
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="orderCell">
1
</td>
<td class="variCell">
Please use available space only.
</td>
<td class="orderCell">
100
</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table>
<thead>
<tr>
<td class="orderCell">
Col 1
</td>
<td class="variCell">
Col 2
</td>
<td class="orderCell">
Col 3
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="orderCell">
1
</td>
<td class="variCell">
Please use available space only. Do not push the next column out of the table.
</td>
<td class="orderCell">
100
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

I would suggest using table-layout:fixed for the table and white-space: break-word; for fixed columns and stop table from expanding.
.container {
position: relative;
width: 500px;
height: 200px;
font: 16px arial;
border: 1px solid steelblue;
background-color: lightgoldenrodyellow;
}
.variCell {
position: relative;
text-align: left;
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.variCell span {
position: absolute;
top: 0;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orderCell {
display: inline-block;
width: 65px;
text-align: right;
}
table {
position: absolute;
display: block;
margin-right: 10px;
border: none;
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
}
thead {
position: relative;
display: table-header-group;
height: 25px;
max-height: 25px;
background-color: #93aed2;
text-align: center;
font-size: 14px;
line-height: 25px;
white-space: nowrap;
}
tbody {
position: relative;
border: none;
overflow: hidden;
max-width: 100%;
max-height: 100%;
cursor: pointer;
}
<div class="container">
<table>
<thead>
<tr>
<td class="orderCell">
Col 1
</td>
<td class="variCell">
Col 2
</td>
<td class="orderCell">
Col 3
</td>
</tr>
</thead>
<tbody>
<tr>
<td class="orderCell">
1
</td>
<td class="variCell">
<span>Please use available space only. Do not push the next column out of the table.</span>
</td>
<td class="orderCell">
100
</td>
</tr>
</tbody>
</table>
</div>