The solution for setting the BootStrap title to cross-row is invalid. The bootstrap title

The solution for setting the BootStrap title to cross-row is invalid. The 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>

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:

<Table class = "table-bordered"> <tr> <th colspan = "2" rowspan = "2"> function classification </th> <th> second column </ th> <th> third column </th> <th> fourth column </th> <th> Fifth Column </th> </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>

The effect is as follows:

Summary

The above is a small Editor to introduce you to the BootStrap title setting cross-row invalid solution, I hope to help you, if you have any questions, please leave a message, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!