Javascript 对齐JSX中th标记中的文本

我试图将th标记中的文本居中，在这里的示例中效果很好：但是如果我在浏览器（Firefox）中查看代码，则

标记中的文本不会居中。我不确定这是否与浏览器有关。我有一些基本的造型：

th {
   border: 1px solid purple;
   width: 125px;
   text-align: center;
   padding: 10px;
}

然后在我的ReactJS组件中呈现

表

：

<table>
    <thead>
        <tr>
            <th>Course #</th>
            <th>Course name</th>
            <th>Credit hours</th>
            <th>Time</th>
            <th>Days</th>
            <th>Seats available</th>
        </tr>
    </thead>
    <tbody>
        {details}
    </tbody>
</table>

课程#
课程名称
学时
时间
天
有座位吗
{详细信息}

您需要找到覆盖您的CSS规则的内容，然后重新编写规则，使其比您找到的规则更具体。例如，您可以将选择器更改为：

html body table th {
   border: 1px solid purple;
   width: 125px;
   text-align: center;
   padding: 10px;
}

看看浏览器是如何决定哪些规则最相关的-

---

最后，您可以添加

！重要信息

至

文本对齐

声明。但这将使以后更难覆盖该规则-

您还可以添加一个！文本对齐后的重要信息。这将给予它更高的优先权。例如：

table th {
         color: #000 !important;
}

---

这可能是一个CSS问题。可能有一些规则凌驾于你的之上。你需要找到规则，写一个更有力的规则。你知道如何使用firebug来检查CSS吗？在检查代码时，我确实通过文本对齐和填充得到了一条线。我通过添加文本对齐：居中解决了这个问题！重要的；这就解决了，但这不是一个很好的主意谢谢你。我不知道如何重写一条更具体的规则。