How to set the BootStrap title to prohibit crossing lines (example code)

This time I will show you how to set the BootStrap title to prohibit crossing lines, and what are the precautions for setting the BootStrap title to prohibit crossing lines. The following is a practical case, let's take a look.

【Related video recommendation: Bootstrap tutorial】

Recently I am using BootStrap tables to make a report interface (no report function is required, only It needs to be previewed and the rows are arranged without changing according to the data volume. If there is a better framework, please recommend it). It is found that the cross-row attribute rowspan of 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 cell attribute of "Functional Classification" is set with colspan="2" rowspan="2", but only colspan="2" has an effect.

solution:

Do not put cells that need to cross rows in the tag. 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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of JS getting the current geographical location case

parabola.js implements parabola and adds to shopping cart Function

Detailed explanation of eventBus sibling component communication

The above is the detailed content of How to set the BootStrap title to prohibit crossing lines (example code). For more information, please follow other related articles on the PHP Chinese website!