语义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 - 如何创建表格标题

回答

相关问题