Invalid BootStrap title and invalid bootstrap title

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.