<table>
<tr>
<td>Lorem, ipsum</td>
<td class="clip">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias est officiis ab autem laudantium! Inventore voluptate dolorum doloribus et magni?</td>
</tr>
<tr>
<td>Lorem, ipsum</td>
<td class="clip">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias est officiis ab autem laudantium! Inventore voluptate dolorum doloribus et magni?</td>
</tr>
<tr>
<td>Lorem, ipsum</td>
<td class="clip">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestias est officiis ab autem laudantium! Inventore voluptate dolorum doloribus et magni?</td>
</tr>
</table>
table {
width: 100%;
table-layout:fixed;
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
td:first-child {
width: 100px;
}
.clip {
position: relative;
white-space: nowrap;
overflow: hidden;
}
.clip::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background: linear-gradient(to right, transparent, white);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.