Make text in a HTML table cell overlap other cells

Question

I want to have some longer text in a cell to overlap in the next cell instead of wrapping, but without making the first column bigger.

If i give the cell

white-space: nowrap;
position: absolute;

it will be in the right position but other text will flow under it.

Thanks for a quick answer.

Answer 1

You can make the content of a cell flow into other cells on the same row by setting overflow: visible, preventing line breaks, and setting a fixed width, which also requires fixed table layout. You also need to set a fixed width for the table as a while, because otherwise browsers won’t do fixed table layout.

<style>
.x { 
  width: 3em;
  white-space: nowrap;
  overflow: visible;
  color: red;
}
table {
  table-layout: fixed;
}
th:nth-child(1) { width: 3em; }
th:nth-child(2) { width: 15em; }
th:nth-child(3) { width: 2em; }
th:nth-child(4) { width: 7em; }
th:nth-child(5) { width: 3em; }
</style>
<table border cellspacing=0>
<thead>
   <th>nr<th>name<th>year<th>category<th>price
<tbody>
<tr>
  <td><div class=x>A longer line that should not wrap , but go over the other cells</div></td>
  <td><td><td><td>
<tr>
  <td>999.0
  <td>Some name
  <td>2000
  <td>Some category
  <td>135.32
</table>

This is so complicated that you should probably do what @MikeW suggests, which does not make the cell content overflow to other cells but makes the cell span all the five columns.