Ich habe eine Bootstrap-Hover-Tabelle und versuche, die Spaltenüberschriften mithilfe von in der Mitte auszurichten <th align="center">. Dies scheint jedoch keinerlei Auswirkungen auf die Tabelle zu haben <td align="center"> Funktioniert einwandfrei.

Das ist mein Code:

<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="https://stackoverflow.com/questions/42682942/{% 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>

Wenn Sie Bootstrap verwenden, verwenden Sie dessen CSS-Regeln.

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

Benutze das

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

Attributausrichtung funktioniert nicht, weil im Bootstrap-Stylesheet Folgendes zu finden ist:

th {
    text-align:left
}

Oder das kann ausprobiert werden.

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

Wenn keine der oben genannten Methoden funktioniert, können Sie es versuchen

style="text-align:center !important"

Ich hatte das gleiche Problem beim Ausrichten in einer Vuetify-Tabelle und das hat es behoben.