[BootStrap-5] Affichage d'une table avec table-bordered

**merou19** · 01/11/2021, 10h26

Bonjour à tous,

Je vois dans la doc que les séparateurs de lignes de Bootstrap 5 doivent disparaitre et affichier seulement un quadrillage avec l'option table-bordered.
Dans mon code ci dessous, j'ai les 2 qui se cumulent :

Nom : table_bootstrap.JPG
Affichages : 107
Taille : 24,1 Ko

Nom : table_bootstrap.JPG
Affichages : 107
Taille : 24,1 Ko

Je ne veux que le quadrillage simple, et pas les lignes en gras qui s'ajoutent à mes séparations de lignes.
C'est peut être tout bête, mais je ne trouve pas !
J'ai essayer les options collapse, border_bottom: none, border-bottom-0, et plein d'autres trucs, sans succès.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
    <body>
		<section class="section fond-blanc">
			<div class="container">
				<div class="row">
					<div class="col-xl-12">
						<table class="table table-bordered table-hover">
							<thead class="table-light">
								<tr class="row">
									<th class="col-1 border-start border-end"></th>
									<th class="col-1 td_center border-start border-end texte-petit">Id</th>
									<th class="col-10 td_center border-start border-end texte-petit">Nom</th>
								</tr>
							</thead>
							<tbody>
								<tr class="row no-gutters">
									<td class="col-1 td_center texte-petit"><input type="radio" name="select_typeproduit" value="1"></td>
									<td class="col-1 td_center texte-petit">1</td>
									<td class="col-10 texte-petit"><span class="marge-gauche">Test1</span></td>
								</tr>
								<tr class="row no-gutters">
									<td class="col-1 td_center texte-petit"><input type="radio" name="select_typeproduit" value="2"></td>
									<td class="col-1 td_center texte-petit">2</td>
									<td class="col-10 texte-petit"><span class="marge-gauche">Test2</span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</section>
	</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.section {
    padding-top: 30px;
    padding-bottom: 30px;
}
 
.fond-blanc {
    background-color: white !important;
}
 
.td_center {
    text-align: center !important;
}
 
th.texte-petit {
    font-size: 12pt;
}
 
td.texte-petit {
    font-size: 12pt;
}
 
.form-marge-gauche {
    margin-left: 30px;
}

Merci d'avance pour votre aide !

**NoSmoking** · 01/11/2021, 16h05

Bonjour,
c'est surprenant j'ai insérer le code de ta <table> dans une page ayant bootstrap.css v.5 et je ne constate pas cette ligne persistante !

**merou19** · 01/11/2021, 16h33

Merci beaucoup pour ton test et ton retour !

Alors, je viens d'essayer comme toi : en effet, c'est ok.

Et je vois que le cdn de bootstrap est sur la version 5.0.2, alors que dans mon projet sous Symfony, j'utilise la version 5.1.3 par Yarn.

Par Yarn, je suis redescendu à la version 5.0.2, et c'est nickel !

Merci encore, je mets ce sujet en résolu

[BootStrap-5] Affichage d'une table avec table-bordered

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager