Invalid BootStrap title and invalid bootstrap title

Invalid BootStrap title and invalid bootstrap title

Recently, we have been using a BootStrap table to create a report interface (you do not need the report function. You only need to preview the table and set the rows and columns without changing the data size. If you have a better framework, we recommend that you .), It is found that the cross-row attribute rowspan is invalid in the header setting. The html is as follows:

<Table class = "table-bordered"> <thead> <th colspan = "2" rowspan = "2"> function classification </th> <th> second column </ th> <th> third column </th> <th> fourth column </th> <th> Fifth Column </th> </thead> <tr> <td> first column </td> <td> second column </td> <td> third column </td> <td> fourth column </td> <td> Fifth Column </td> </tr> <td> first column </td> <td> second column </td> <td> third column </td> <td> fourth column </td> <td> Fifth Column </td> </tr> </tabel>

View Code

The effect is as follows:

The figure shows the effect. The cell attribute "function category" sets colspan = "2" rowspan = "2", but only colspan = "2.

Solution:

Do not place cells that require cross-row placement in the <thead> label. You can set the following:

1 <table class = "table-bordered"> 2 <tr> 3 <th colspan = "2" rowspan = "2"> function classification </th> 4 <th> column 2 </th> 5 <th> column 3 </th> 6 <th> column 4 </th> 7 <th> Column 5 </th> 8 </tr> 9 <tr> 10 <td> first column </td> 11 <td> second column </td> 12 <td> third column </td> 13 <td> fourth column </td> 14 <td> Fifth Column </td> 15 </tr> 16 <tr> 17 <td> first column </td> 18 <td> second column </td> 19 <td> third column </td> 20 <td> fourth column </td> 21 <td> Fifth Column </td> 22 </tr> 23 </tabel>

View Code

The effect is as follows:

The specific cause is not found. Please kindly advise.

If you have any better solutions, please add them. Thank you.