ui sémantique - comment styliser les en-têtes de tableau

Question

J'ai donc construit une table en semantique-ui. très simple. Cependant, les styles ne semblent pas s'appliquer à ma table dans certains aspects et je ne peux pas obtenir les titres à la carte sur les colonnes. voir la capture d'écran ci-dessous

la colonne L est bien, mais les autres sont un peu bancal et son nom est juste bien nantis. comment puis-je ajuster les styles alors faites ce travail?

J'ai essayé d'ajouter une largeur à la div ma table se trouve dans, mais il étend simplement sans modifier le corps de la table ou la tête

est le code ici:

<div className="tableContainer"> 
     <h1> Table </h1> 
     <table className="ui striped table"> 
      <thead> 
      <tr> 
       <th className="headings">Ranks</th> 
       <th className="headings">Name</th> 
       <th className="headings">P</th> 
       <th className="headings">W</th> 
       <th className="headings">L</th> 
      </tr> 
      </thead> 
      <tbody> 
      {this.props.players.sort(function(a, b) { 
       return (a.rank) - (b.rank); 
      }).map(function(player, index) { 
      index +=1; 
      return <tr key={index} className="table-rows"> 
        <td className="stats">{player.rank}</td> 
        <td className="stats">{player.name}</td> 
        <td className="stats">{player.played}</td> 
        <td className="stats">{player.wins}</td> 
        <td className="stats">{player.losses}</td> 
        </tr> 
      }, this)} 
      </tbody> 
     </table> 
     </div> 

Answer 1

Si vous travaillez dans Reactjs, vous devez utiliser le paquet reactjs de Semantic-UI: Semantic-UI React. Dans la section Table, vous pouvez voir que certaines propriétés sont transmises via les accessoires. Vous pouvez définir le numéro de colonne avec columns prop. Et sous l'onglet Table.Header, vous pouvez voir qu'il y a un accessoire className. Vous pouvez l'utiliser pour styliser votre en-tête. Pour référence, visitez: Semantic-UI React Table.