How to make a dynamic table cell use overflow:hidden - html

Question

I want to use overflow:hidden on a dynamic table that should only be as wide as necessary:
<table>
<tr>
<td>Should_not_overflow</td>
</tr>
<tr>
<td style="overflow: hidden;">This text should overflow please</td>
</tr>
</table>
I know that it works with a fixed table layout, but I need a dynamic table.
I also know that it would work with a fixed width and a nested <div>, but again, I need a dynamic table layout.

Answer 1

.table-wrapper {
font-size:12px;
position: relative;
width: 50%;
height: 275px;
border: 1px solid #333;
padding: 50px 0 0;
margin: 10px auto;
}
.header-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 50px;
background-color: #03A9F4;
}
.table-container {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
table {
width: 100%;
background-color: #FFF;
overflow-x: hidden;
overflow-y: auto;
}
tr {
&:nth-child(even) {
background-color: #F2F2F2;
}
th {
text-align: left;
padding: 0 5px;
.th-extra {
width: 100%;
.th-extra__inner {
position: absolute;
top: 0;
color: #000;
line-height: 50px;
text-align: left;
border-left: 1px solid #333;
padding: 0 0 0 5px;
margin: 0 0 0 -5px;
}
}
&:first-child {
.th-extra__inner {
border: none;
}
}
}
}
td {
line-height: 42px;
text-align: left;
padding: 0 5px;
& + td {
border-left: 1px solid #333;
}
}
<div class="table-wrapper">
<div class="header-bg"></div>
<div class="table-container">
<table cellspacing="0">
<thead>
<tr>
<th>
<div class="th-extra">
<div class="th-extra__inner">First</div>
</div>
</th>
<th>
<div class="th-extra">
<div class="th-extra__inner">Second</div>
</div>
</th>
<th>
<div class="th-extra">
<div class="th-extra__inner">Third</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column with longer content</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
<tr>
<td>Column</td>
<td>Column</td>
<td>Column</td>
</tr>
</tbody>
</table>
</div>
</div>