왜 table의 text가 align되지 않는가?

최대 1 분 소요

가운데 정렬!

  • html에서 table의 header 부분을 가운데 정렬하려고 했는데, 이게 계속 안되더라고요.
  • 다음처럼 간단한 코드인데 계속 안되서, 왜 안되는지를 찾아봤더니,

<thead class="thead-dark">
    <tr>
        {% for col_name in simulated_log%}
        <th scope="col" align="center">{{col_name}}</th>
        {% endfor %}
    </tr>
</thead>

  • 여기서 해답을 찾았습니다.

  • 정리하자면,
    • text-align은 html에서 제공하는 것이 아닌, css에서 제공하는 것임(원래는 되었는데 없어짐)
    • 따라서, 이걸 사용하기 위해서는 외부 css에서 정의해줘야 함.
    • 다행히도 bootstrap에서는 class로 이미 정의되어 있음.
  • 따라서, 다음처럼 사용하면 됩니다.

<thead class="thead-dark">
    <tr>
        {% for col_name in simulated_log%}
        <th scope="col" class="text-center">{{col_name}}</th>
        {% endfor %}
    </tr>
</thead>

댓글남기기