语义 ui - 如何设置表格标题的样式答案

【问题标题】：semantic ui - how to style table headings语义 ui - 如何设置表格标题的样式
【发布时间】：2018-03-31 12:04:32
【问题描述】：

所以我在语义 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>

【问题讨论】：

您需要提供相关的标记和 css 以便人们对其进行故障排除。
@RobertWade 完成
也需要你的 CSS （或工作小提琴）。
@RobertWade 我没有 CSS，抱歉。我使用从语义ui继承的css
为了让人们在这里为您提供帮助，您必须提供问题的工作示例或至少提供重现问题所需的代码。你不能指望人们出去根据屏幕快照和没有 CSS 的标记来拼凑你的问题。显然，如果您使用语义 ui，则您拥有 CSS。很可能您下载了它或正在链接到它的 CDN。收集该 CSS 的各个部分并将其与您的示例一起提供。否则恐怕这里的大多数人都不愿意帮助你。

标签： css reactjs semantic-ui jsx

【解决方案1】：

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

【讨论】：

要安装依赖，只需执行npm install semantic-ui-react --save。