How to solve the problem that BootStrap title setting is invalid across rows

This article mainly introduces the solution to the invalid cross-line setting of BootStrap title. Friends who need it can refer to it. I hope it can help everyone.

Recently I am using BootStrap's table to make a report interface (no report function is required, only preview and row arrangement are required without changing according to the amount of data. If you have a better framework, please recommend it.), and found that Setting the cross-row attribute rowspan in the title is invalid. The html is as follows:

<table class="table table-bordered">
 <thead>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </thead>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

The effect is as follows:

You can see the effect in the picture, the "Functional Classification" unit The grid attribute is set with colspan="2" rowspan="2", but only colspan="2" has an effect.

Solution:

Do not put cells that need to span rows in the label. You can set it as follows:

<table class="table table-bordered">
 <tr>
  <th colspan="2" rowspan="2">功能分类</th>
  <th>第二列</th>
  <th>第三列</th>
  <th>第四列</th>
  <th>第五列</th>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
 <tr>
  <td>第一列</td>
  <td>第二列</td>
  <td>第三列</td>
  <td>第四列</td>
  <td>第五列</td>
 </tr>
</tabel>

The effect is as follows:

Related recommendations:

How to implement bootstrap table sum total quantity statistics

How to use the bootstrap paginator paging plug-in

Detailed explanation of the Bootstrap form validation function

The above is the detailed content of How to solve the problem that BootStrap title setting is invalid across rows. For more information, please follow other related articles on the PHP Chinese website!