在 CSS 中带有水平滚动条的动态 Table

Question

在主页上工作我遇到了以下问题：我想显示一个 table - table 列的数量可以用复选框来选择。另外，我的网站应该在移动设备上运行 phone，所以我放入了相应的元行。

不幸的是，我的网站无法正常工作，因为它没有显示我的水平滚动条..

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);
}

Answer 1

取下 table 上的 ID，然后将其放在 div AROUND table.

上

它应该可以满足您的需求，但您可能还想将 width:100% 添加回 table。

编辑：想我会在这里添加一个简单的工作示例。 http://codepen.io/anon/pen/qaGARr?editors=1100#0

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

如果宽度低于 700 像素，滚动条就会出现

在 CSS 中带有水平滚动条的动态 Table

Dynamic Table with a horizontal Scrollbar in CSS

php

html

css

html-table

scrollbar