I have a table. The table is generated by some server side code which I can't change but I can add some CSS to style.
<table>
<tbody>
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
</tbody>
</table>
Is there a way of merging the two columns using CSS and not JQuery
|row1 column1 |row 1 column 2 |
| | |
get an output like
| row 1 column2 |
| |
This isn't possible within CSS, even when you say they're block level elements.
They are still two separate elements and HTML will render them as such.
As shown below:
I believe you are going to have to try and change the html, use the
colspan
attribute:There is a related attribute
rowspan
that achieves the same for rows.One last dirty option is to always set one of the elements to
display: none
and the otherwidth: 100%