Geek Answers Handbook

Please explain the strange behavior of the rows in the table of HTML tables.

Consider the following definition of an HTML table.

<table> <tbody> <tr> <td rowspan='2'>A</td> <td>2</td> <td rowspan='2'>B</td> </tr> <tr> <td rowspan='2'>C</td> </tr> <tr> <td>1</td> <td>3</td> </tr> </tbody> </table>

I expect the table to look like this:

 +---+---+---+ | A | 2 | B | | +---+ | | | C | | +---+ +---+ | 1 | | 3 | +---+---+---+

But in Firefox, IE8 and Chrome, the table is displayed as:

 +---+---+---+ | A | 2 | B | +---+---+---+ | 1 | C | 3 | +---+---+---+

If I add another column to the column, like this:

 <table> <tbody> <tr> <td>a</td> <td rowspan='2'>A</td> <td>2</td> <td rowspan='2'>B</td> </tr> <tr> <td>b</td> <td rowspan='2'>C</td> </tr> <tr> <td>c</td> <td>1</td> <td>3</td> </tr> </tbody> </table>

... I get the following, which is more like what I want.

 +---+---+---+---+ | a | A | 2 | B | +---+ +---+ | | b | | C | | +---+---+ +---+ | c | 1 | | 3 | +---+---+---+---+

Questions:

  • Are browsers working properly? If so, why is the table not smoothing intuitively in the case of the first HTML segment indicated above?

  • Is there any valid HTML / css that will make the table render when I intend it?

+4
source share
2 answers

I think this actually works ... The height of your cell is not fixed, so it seems that it does not work. But if you try it like this:

 <table border="1"> <tr> <td height="50px" rowspan="2">A</td> <td>2</td> <td rowspan="2">B</td> </tr> <tr> <td rowspan="2">C</td> </tr> <tr> <td>1</td>> <td>3</td> </tr> </table>

You will see that the table behaves the way you want:

Table result with border
(source: myimg.de )

Therefore, if you want your table to look the way you explained, I think all you have to do is determine the height of the cell in CSS or as I described above.

+5
source

Maybe it can help! I had the same problem: "rowspan not working". I tried the height property trick, but that didn't help. After searching a few more tricks on the Internet, I noticed that the tr tags were not closed properly: <tr>...<tr> instead of <tr>...</tr> , and my rowspan - as expected.

-1
source

More articles:


All Articles