語義ui - 如何創建表格標題

因此，我在語義UI中構建了一個表格。很簡單。然而風格似乎不適用於我的表在某些方面，我不能得到標題映射的列。看看下面的截圖語義ui - 如何創建表格標題

將L列是不錯，但其他人都有點靠不住和名稱只是小康。我怎樣才能調整風格，使這項工作？

我試圖寬度添加到div我的桌子坐在但它只是擴展它在不改變表身體或頭部

這裏是代碼：

<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>

來源

2017-10-19 The Walrus

您需要提供相關的標記和CSS以便人們對其進行故障排除。 –

@RobertWade完成 –

需要你的CSS（或工作小提琴）。 –

如果您正在在Reactjs中，您應該使用Semantic-UI的reactjs包：Semantic-UI React。在Table部分，您可以看到某些屬性通過道具傳遞。您可以使用columns prop來設置列號。在Table.Header選項卡下，您可以看到有一個className支柱。您可以使用它來設置標題的樣式。作爲參考，請訪問：Semantic-UI React Table。

來源

2017-10-19 13:28:31

要安裝依賴項，只需執行'npm install semantic-ui-react -save'。 –

語義ui - 如何創建表格標題

回答

相關問題