Question

所以我用semantic-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>

Answer 1

如果你在Reactjs工作，你应该使用Semantic-UI的reactjs包：Semantic-UI React。在Table部分中，您可以看到某些属性通过道具传递。您可以使用columns道具设置列号。在Table.Header标签下，您可以看到className道具。您可以使用它来设置标题的样式。如需参考，请访问：Semantic-UI React Table。

语义ui - 如何设置表格标题

1 个答案: