Динамическая таблица с горизонтальной полосой прокрутки в CSS

Работая на домашней странице, я пришел к следующей проблеме:
Я хочу отобразить таблицу — количество столбцов таблицы можно выбрать с помощью флажков. Кроме того, мой веб-сайт должен работать на мобильном телефоне, поэтому я вставил соответствующую мета-строку.

К сожалению, мой веб-сайт не работает должным образом, так как он не показывает мою горизонтальную полосу прокрутки ..

PHP-код:

echo '<table id="dynamictable">';
echo '<tr>';
foreach($res_category_arr as $columnname)
{
echo '<th>' . $columnname. '</th>';
}
echo '</tr>';

if (mysqli_num_rows($result) > 0)
{
while($data_current_row=mysqli_fetch_assoc($result))
{
echo '<tr>';
foreach($res_category_arr as $tabledata)
{
echo '<td>' . $data_current_row[$tabledata] . '</td>';
}
echo '</tr>';
}
}

echo '</table>';

res_category_arr представляет массив, который содержит имена нужных столбцов.
Код CSS:

#dynamictable{
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
text-align: center;
}

#dynamictable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}

#dynamictable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}

-1

Решение

Снимите удостоверение со стола и положите его на место ВОКРУГ стол.

Он должен делать то, что вы ищете, но вы также можете добавить ширину: 100% назад к таблице.

РЕДАКТИРОВАТЬ: понял, я бы добавил простой рабочий пример здесь.
http://codepen.io/anon/pen/qaGARr?editors=1100#0

.scroll {
overflow-x:auto;
width:100%;
}
table {
width:100%;
min-width:700px;
}

Если вы опуститесь ниже 700 пикселей в ширину, полоса прокрутки появится вверх

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]