HTML table to fill page, some columns fixed - html

Question

I want my table to fill the page always. Some of the columns should be a fixed px width, while the others fill proportionately as the page grows. I don't want any data overflop to mess with the table, just cut it off rather than expanding vertically.
.table {
table-layout: fixed;
width: 100%;
border: 1px solid black;
}
.name {
width: 50px;
}
.age {
width: 20px;
}
.occ {
width: 25%;
}
.notes {
width: 75%;
}
.id {
width: 20px;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
<table class='table'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='age'>Age</th>
<th class='occ'>Occupation</th>
<th class='notes'>Notes</th>
<th class='id'>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>34</td>
<td>Programmer</td>
<td>Here is a whole lot of notes that I dont want to fill the whole screen because it is too long</td>
<td>12</td>
</tr>
</tbody>
</table>

Answer 1

I only made a small change to your CSS.
Not sure this is what you are looking for (made the width of the other columns to be 100px only to avoid overlapping on the column titles but you can adjust that to your needs)
.table {
table-layout: fixed;
width: 100%;
}
.name, .occ, .age{
width: 100px;
}
th, td, table{
border: 1px solid gray;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
<table class='table'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='age'>Age</th>
<th class='occ'>Occupation</th>
<th class='notes'>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>34</td>
<td>Programmer</td>
<td>Here is a whole lot of notes that I dont want to fill the whole screen because it is too long</td>
</tr>
</tbody>
</table>