Tr contains a td with rowspan, just doesn't force a new row with the next tr
I am writing a small program with a table. And I found that if tr only contains a td with rowspan and colspan attributes, then when I add another tr, that tr won't be on a new row. Here's the code:
<table>
<tr>
<td colspan='6' rowspan='2'>hello</td>
<td colspan='6' rowspan='2'>hello</td>
</tr>
<tr>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
</tr></table>
for reference, see jsFiddle link. http://jsfiddle.net/fvxjq1qL/ This seems really awkward and I don't know how to fix it. Many thanks for your help.
http://jsfiddle.net/uhq7o2sw/1/ This is the result I want (no second empty tags). This little program I am writing is for users to draw a table on their own in a html page (I need to get an html table to generate a pdf report, so it would be very convenient for users to draw a table and I don't need to write html to get the data I need). When I tested this little program I found this error. If the user only wants to set tr with 6 colspans and 2 rowspans (let's assume he / she wants the td to be higher) then the next tr will be on one line. So I tried to find a solution to fix this but no luck.
source to share
The problem is the rowspan is set to a value 2
. Therefore, the cell also takes up the space of the cell below it. The second row then starts two positions to the right (past the cells with rowspan). This cell is then displayed at the top of the table because there is no cell above it. This is because there is no cell that only occupies the top row. This can be demonstrated more clearly in this example:
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<table>
<tr>
<td colspan='6' rowspan='2'>hello</td>
<td></td>
</tr>
<tr>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
</tr>
</table>
source to share