Is it possible to break HTML table row into multiple lines?

Question

I am modifying an old website to support mobile screen resolution (one additional fixed @media width), and need to break a wide table, containing 4 columns, into 2 column table. So each row should spread in two rows.I can't modify HTML, only CSS. Columns are fixed width, everything is fixed width. Is there any way to tweak table style to accomplish this? Make td display:'something-other' or similar technique?

Answer 1

you can use word wrap

td {
     word-wrap:break-word;
}

or setting maximum width of the table to certain number

table {
max-width:400px;
}

Answer 2

One posible solution is to increase vertical spacing, and then transform the cells to move to the appropiate place.

In the followinf demo, hover the table to see the effect applied

table {
  border: solid 1px blue;
  font-size: 20px;
  transition: all 2s;
}

td {
  border: solid 1px green;
  width: 50px;
  transition: all 2s;
}

table:hover {
  border-spacing: 4px 31px;
}
table:hover td:nth-child(-n+2) {
  transform: translateY(-25px);
}

table:hover td:nth-child(n+3) {
  transform: translate(-116px,4px);
}

<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
</table>

However, notice that the table dimensions are wrong. May be you will want to set it in a container with overflow hidden.