Spring Bootstrap テーブルを中央揃えする方法 備忘録#2

テーブルを中央揃えする方法

初めに

今回は、Springbootを使って、掲示板機能を作成した際に、テーブルを中央揃えの仕方を調べて扱ったので、備忘録として残したいと思い記述しました。

テーブルだと、text-centerやjustify-content-centerを使用してもなかなか中央に行ってくれないので、私はこれを試しました。

###完成図（イメージ)

↑このような感じでテーブルを真ん中に持っていきます！

###HTMl

+  <div class="col-10 mx-auto">
    <table border="1" class="table">
        <tr class="table-secondary">
          <th>タイトル</th>
          <th>内容</th>
          <th>作成日</th>
        </tr>
        <tr th:each="post:${posts}">
          <td><a th:href="@{/detail/{postId}/show(postId=${post.id})}" th:text="${post.title}"></a></td>
          <td><a th:href="@{/detail/{postId}/show(postId=${post.id})}" th:text="${post.content}"></a></td>
           <td th:text="${#temporals.format(post.createDate, 'MM/dd')}"></td>
       </tr>
      </table>
    </div>

↑このHTMLの一行目のように、tableをの親要素であるdivタグに対して、class="mx-auto"とすることで、テーブルを中央揃えできます。

参考ページ