Maison > interface Web > js tutoriel > le corps du texte

Comment définir le titre BootStrap pour interdire le croisement des lignes (exemple de code)

PHPz
Libérer: 2018-10-16 15:44:32
original
1441 Les gens l'ont consulté

Cette fois, je vais vous montrer comment définir le titre BootStrap pour interdire le croisement des lignes, et quelles sont les précautions à prendre pour définir le titre BootStrap pour interdire le croisement des lignes. Ce qui suit est un cas pratique, jetons un coup d'œil.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Récemment, j'utilise des tables BootStrap pour créer une interface de rapport (aucune fonction de rapport n'est requise, seulement il doit être prévisualisé et les lignes sont disposées sans changer en fonction du volume de données. S'il existe un meilleur cadre, veuillez le recommander). Il s'avère que l'attribut inter-lignes du titre n'est pas valide. Le code HTML est le suivant :

<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>
Copier après la connexion

L'attribut de cellule de "Classification fonctionnelle" est défini avec colspan="2" rowspan="2", mais seul colspan="2" a un effet.

Solution :

Ne placez pas les cellules qui doivent traverser des lignes dans la balise Vous pouvez la définir comme suit :

<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>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. informations passionnantes, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Explication détaillée de l'obtention du cas de localisation géographique actuel avec JS

parabola.js implémente la parabole et ajoute au panier Fonction

Explication détaillée de la communication des composants eventBus brother

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal