Break a using only CSS

How about using inline-block with a fixed width table… Or using % roughly 45% of width for your td elements so you won’t need to define width for the table

Demo

Here, am just turning the td to display: inline-block; and because of the fixed width table, they will be forced to wrap to the next line.

Also am using word-wrap: break-word; property so that non spaced strings are forced to break.

table {
    width: 120px;
}

table tr td {
    width: 50px;
    word-wrap: break-word;
}

table tr td {
    display: inline-block;
    margin-top: 2px;
}

You can use % based width as well, so that you don’t need to care about the cell widths….

You might need vertical-align: top; along with min-height if in case a cell is blank in your table

table tr td {
    display: inline-block;
    margin-top: 2px;
    vertical-align: top;
    min-height: 20px;
}

Demo (Only required if a cell is blank)

Just note that inline-block will cause some issues with 4px offset, in this case just assign font-size: 0; to the table and re-set the font-size back for your td element, this way you will get consistency in cell margin.

Warning: I would never ever recommend to do such types of things, so
keep this as your last priority. If you have JavaScript control, than
consider appending tr around the td

From here onwards please ignore if you cannot use jQuery, say suppose you have an using jQuery library you can simply add the snippet to that JS file….

(Am adding a class here to uniquely identify the element, class can also be added using .addClass() by defining some nearest CSS selector) so no question of modifying the HTML here.

$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr
var cells = $('table.wrap_trs tr td');
for (var i = 0; i < cells.length; i += 2) {
    cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr
}

Demo