J'ai une page Web écrite en PHP qui affiche un tableau, et j'utilise nvd3 pour afficher également un graphique basé sur le tableau, mais d'après ce tutoriel: http://lsxliron.github.io/nvd3Tutorial/ Je devrais utiliser plusieurs feuilles de style css, y compris

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" />

Dans ma tête pour la page. J'utilise également ma propre feuille de style externe. Cependant, celui lié a le code

td,th {
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px
}

td,th {
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

table {
  width: 100%;
  display: table
}

,th,td {
  border: none
}

*,*:before,*:after {
  box-sizing: inherit
}

Dans ce qui gâche ma table, à moins de ne pas inclure cette feuille de style, de la remplacer explicitement par mon propre css local, ou de faire apparaître le graphique dans une nouvelle page Web, puis-je faire quelque chose? Et si ce sont mes seules options, comment pourrais-je ignorer la section *,*:before,*:after? Ça décentre mes têtes

Merci d'avance

Edit: Le code étant affecté par

*,*:before,*:after {
  box-sizing: inherit
}

Est un div à l'intérieur d'un td utilisé pour espacer mes en-têtes et sous-titres, j'ai ajouté box-sizing: initial au div, et cela fonctionne bien maintenant (tout a été déplacé vers la gauche auparavant). Le box-sizing inherit réduisait le contenu et augmentait la marge.

0
Lewis Smith 1 août 2017 à 00:50

2 réponses

Meilleure réponse

Materialize n'est pas requis pour NVD3. J'ignorerais cette partie du didacticiel à moins que vous ne souhaitiez utiliser Material Design. Si vous souhaitez utiliser materialize, rendez vos sélecteurs plus spécifiques.

Par exemple.

.my-table-wrapper td, .my-table-wrapper th {
  padding: 15px 5px;
  /* etc. */
}
1
jeznag 31 juil. 2017 à 23:21

Vous avez seulement besoin d'importer le champ de matérialisation dans votre nouveau fichier css3, comment vous savez que css fonctionne sur cascade, cela signifie que lorsque votre utilisation est importée en css en haut de la page, ce style se chargera dans le même css, et parce que css travailler en cascade tous les derniers styles écrasent le premier style (tant que les styles se répètent). Aller:

@import url("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");

td,th {
 padding: 15px 5px;
 display: table-cell;
 text-align: left;
 vertical-align: middle;
 border-radius: 2px
 padding: 0
 border: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0
 width: 100%;
}

*,*:before,*:after {
  box-sizing: inherit
}
0
Risa__B 31 juil. 2017 à 23:49