現在ウェブサイトにテーブルを表示しようとしています。そこでBootstrap5を軸として使っています。デスクトップでは正常に表示されますが、スマホ画面にした際に、画像のように表示されます。カラムヘッダーが表示されておらず、また表示がおそらくblockになってしまっています。これを正常なテーブルの形に表示し、横スクロールできるようにしたいです。
コード
{% load wagtailcore_tags %}
{% load table_block_tags static %}
<div class="table-responsive block">
<table class="table">
{% if table_caption %}
<caption class="table">{{ table_caption }}</caption>
{% endif %}
{% if table_header %}
<thead>
<tr>
{% for column in table_header %}
{% with forloop.counter0 as col_index %}
<th scope="col" {% cell_classname 0 col_index %}>
{% if column.strip %}
{% if html_renderer %}
{{ column.strip|safe|linebreaksbr }}
{% else %}
{{ column.strip|linebreaksbr }}
{% endif %}
{% endif %}
</th>
{% endwith %}
{% endfor %}
</tr>
</thead>
{% endif %}
<tbody>
{% for row in data %}
{% with forloop.counter0 as row_index %}
<tr>
{% for column in row %}
{% with forloop.counter0 as col_index %}
{% if first_col_is_header and forloop.first %}
<th scope="row" {% cell_classname row_index col_index table_header %}>
{% if column.strip %}
{% if html_renderer %}
{{ column.strip|safe|linebreaksbr }}
{% else %}
{{ column.strip|linebreaksbr }}
{% endif %}
{% endif %}
</th>
{% else %}
<td {% cell_classname row_index col_index table_header %}>
{% if column.strip %}
{% if html_renderer %}
{{ column.strip|safe|linebreaksbr }}
{% else %}
{{ column.strip|linebreaksbr }}
{% endif %}
{% endif %}
</td>
{% endif %}
{% endwith %}
{% endfor %}
</tr>
{% endwith %}
{% endfor %}
</tbody>
</table>
</div>
table.table {
width: 100%;
}
@media screen and (max-width: 640px) {
div.block {
width: 100%;
overflow-y: auto;
white-space: nowrap;
overflow-x: scroll;
}
}
trタグをinline-blockにするとカラムヘッダーは現れず、ロウヘッダーがカラムになります。