Я создаю тему Wordpress и пытаюсь изменить дизайн таблиц, которые уже находятся в содержимом сайта, на котором я буду устанавливать тему. Все мои изменения в таблице сработали, за исключением добавления 'overflow-x: auto' к его контейнеру div, чтобы сделать таблицу с горизонтальной прокруткой, когда на мобильном телефоне. В настоящее время таблица изменяет свою ширину в зависимости от размера области просмотра, но когда она не может стать меньше, она сохраняет свой размер и делает прокручиваемой всю страницу.
Я посмотрел на множество других вопросов и ответов по stackoverflow, которые похожи на это, но они, похоже, не работают для меня. Я создал контейнер div вокруг таблицы и добавил к нему «overflow-x: auto», но он ничего не делает.
РЕДАКТИРОВАТЬ: Кажется, что это нормально работает в фрагменте кода StackOverflow, но нена моем сайте Wordpress. Это проблема с Wordpress?
РЕДАКТИРОВАТЬ 2: Когда я установил плагин таблицы, он все еще имел ту же проблему. При обращении к создателю плагина они сказали, что проблема в том, что я использую «grid-column» CSS Grid и что родитель таблицы не отвечает. Я не думал, что это было проблемой раньше, поэтому я не включил ее в свой код здесь. Я отредактировал приведенный ниже код, чтобы отразить то, что я использую в CSS Grid, и теперь фрагмент кода StackOverflow отражает, как он не работает.
.table-template {
display: grid;
grid-template-columns: 10px 1fr 10px;
justify-content: center;
margin: 100px 0;
}
.table-area {
grid-column: 2 / 3;
}
.table-overflow {
overflow-x: auto;
}
table {
border: 1px solid #000;
border-collapse: collapse;
width: 100%;
}
thead {
background-color: #efc879;
font-weight: bold;
}
td, tr, th {
border: 1px solid #000;
}
th, td {
}
th {
font-weight: bold;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
tr:nth-child(even) {
background-color: #ececec;
}
td {
padding: 5px;
}
<main class="table-template">
<section class="table-area">
<div class="table-overflow">
<table>
<tbody>
<tr>
<td></td>
<td>SF</td>
<td>CS</td>
<td>NM</td>
<td>JC</td>
<td>JH</td>
<td>MT</td>
<td>KF</td>
<td>TG</td>
<td>TOTAL</td>
</tr>
<tr>
<td>Person</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0(d)</td>
<td align="center">0(d)</td>
<td align="center">0(d)</td>
<td align="center">0(d)</td>
<td align="center">1</td>
<td align="center">1</td>
</tr>
<tr>
<td>Person</td>
<td align="center">1</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">5</td>
</tr>
<tr>
<td>Person</td>
<td align="center">1</td>
<td align="center">0</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">0(d)</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">3</td>
</tr>
<tr>
<td>Person</td>
<td align="center">0.5(a)</td>
<td align="center">0</td>
<td align="center">0(d)</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1.5</td>
</tr>
<tr>
<td>Person</td>
<td align="center">0.5(a)</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">5.5</td>
</tr>
<tr>
<td>Person</td>
<td align="center">0.5(a)</td>
<td align="center">1</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">0</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">2.5</td>
</tr>
<tr>
<td>Person</td>
<td align="center">0.5(a)</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">0</td>
<td align="center">3.5</td>
</tr>
<tr>
<td>Person</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">0</td>
<td align="center">1</td>
<td align="center">1</td>
<td style="background-position: 0% 50%; background-color: black;">XXX</td>
<td align="center">3</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
В настоящее время таблица изменяет свою ширину в зависимости от размера области просмотра, но когда она не может быть меньше, она сохраняет свой размер и делает прокручиваемую всю страницу.