JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<table>
<thead>
<tr>
<th>Nr</th>
<th>Amount<br> (incl. tax)</th>
<th>Date</th>
<th>Type</th>
<th>Project</th>

<th>Remarks</th>
</tr>
</thead>
<tbody>

<tr>
<td class="tac bold">1</td>
<td class="tar bold tw20">€ 20,90</td>
<td class="tar ellipsis">22-05-2012</td>
    <td class="ellipsis"><div>Hotelovernachting</div></td>
<td>WERV</td>

<td class="ellipsis">Lekker geslapen</td>
</tr>
<tr>
<td class="tac bold">2</td>
<td class="tar bold tw20">€ 12,40</td>
<td class="tar ellipsis">24-05-2012</td>
    <td class="ellipsis"><div>Kantoorartikelen/pennen</div></td>
<td>WNFEV12</td>

<td class="ellipsis">Bla bla</td>
</tr>

</tbody>
</table>

CSS

table{border:1px solid red;border-collapse:collapse;}
td div{
    border:1px solid #ccc;
    padding:5px 0 5px 2px;  
 
}
td div{
      text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  max-width:100px;
  white-space: nowrap;
  overflow: hidden;
}
.bold{font-weight:Bold;}