<第 对齐""center" >在引导表上不起作用。可能是什么原因？

Question

我有一个bootstrap悬停表，我正在尝试使用<th align="center">将列标题与中间对齐。这似乎对表没有任何影响，但是<td align="center">正常工作。

这是我的代码：

<table class="table table-hover">
    <thead>
    <tr>
        <th>Title</th>
        <th>Score</th>
        <th align="center">Product</th>    #This line is not working
        <th>Who Reviewed</th>
        <th>When</th>
    </tr>
    </thead>
    <tbody>
    {% for review in object_list %}
        <tr>
            <td><a href="{% url 'backend_reviews_edit' review.pk %}">{{review.title}}</a></td>
            <td align="center">{{ review.score }}</td>
            <td align="center">{{ review.product.title }}</td>
            <td>{{ review.reviewer_name}}</td>
            <td>{{ review.date_created|date:"m-d-Y" }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
    </div>

Answer 1

如果您正在使用bootstrap，请使用其CSS规则。

<th class="text-center">Product</th>

Answer 2

使用此

<th class="text-center">Product</th>

属性对齐不起作用，因为在Bootstrap样式表上找到以下内容：

th {
    text-align:left
}

Answer 3

如果上述任何工作都可以尝试

style="text-align:center !important"

我在vuetify表中对齐相同的问题中心并修复了它。

Answer 4

或可以尝试。

<th style="text-align:center">Product</th>