Je crée un tableau pour mon site Web. J'utilise la méthode de la liste pour créer la table à l'aide de CSS. Le problème est que cela ne fonctionne pas correctement lorsque Bootstrap CDN est appliqué. Lorsque je supprime le CDN bootstrap, cela fonctionne correctement. Mais je ne peux pas éliminer le bootstrap car il est requis pour certaines autres sections.
Avec BS4 capture d'écran1
Sans BS4 capture d'écran2
<section class="wrapper-usd">
<main class="row-usd title-usd">
<ul>
<li>Name</li>
<li>Amount</li>
<li>Count</li>
<li>Max</li>
<li>Time</li>
</ul>
</main>
<article class="row-usd">
<ul>
<li>Harikumar jyadev</li>
<li>$50</li>
<li>12</li>
<li>48</li>
<li>2:00ET</li>
</ul>
</article>
<article class="row-usd">
<ul>
<li>Harikumar jyadev</li>
<li>$50</li>
<li>12</li>
<li>48</li>
<li>2:00ET</li>
</ul>
</article>
</section>
.wrapper-usd {
width: 100%;
max-width: 1000px;
margin: 20px auto 100px auto;
padding: 0;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
position: relative;
}
/* lists */
.row-usd ul {
margin: 0;
padding: 0;
}
.row-usd ul li {
margin: 0;
font-size: 16px;
font-weight: normal;
list-style: none;
display: inline-block;
width: 20%;
box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
.row-usd ul li {
font-size: 13px;
}
}
@media only screen and (max-width: 479px) {
.row-usd ul li {
font-size: 13px;
}
}
.title-usd ul li {
padding: 15px 13px;
}
.row-usd ul li {
padding: 5px 10px;
}
/* rows */
.row-usd {
padding: 20px 0;
height: 30px;
font-size: 0;
position: relative;
overflow: hidden;
transition: all 0.2s ease-out;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.title-usd {
padding: 25px 0 5px 0;
height: 45px;
font-size: 0;
background-color: rgba(255, 255, 255, 0.1);
border-left: 3px solid rgba(255, 255, 255, 0.1);
}
3 Réponses :
Pouvez-vous essayer d'importer votre fichier css personnalisé après l'importation de bootstrap? Quelque chose comme
<link href="bootstrap.min.css" rel="stylesheet"> <link href="custom.css" rel="stylesheet">
Ca ne fonctionne pas. J'utilise le CSS en ligne pour le CSS personnalisé. J'ai quand même essayé votre méthode mais ne fonctionne pas.
Montrez-moi votre fichier HTML complet
J'utilise la méthode list pour créer le tableau à l'aide de CSS
Utiliser la balise table semble plus sage, et c'est ainsi que Bootstrap gère les tables .
Ajoutez ceci à votre code css:
*, ::after, ::before {
box-sizing: content-box;
}
Parfait !! Merci beaucoup
Content de vous aider.
En quoi cela ne fonctionne-t-il pas correctement?
Pouvez-vous nous dire avant et après le scénario à l'aide de l'extrait
D'accord, je vais ajouter la capture d'écran
J'ai ajouté 2 captures d'écran avant et après l'application de BS4. Pouvez-vous s'il vous plaît vérifier maintenant.