在主页上工作时,我遇到了以下问题:我想显示一个表-可以通过复选框选择表的列数。另外,我的网站应该可以在手机上工作,因此我在相应的meta栏中加上了一行。
不幸的是,我的网站无法正常显示,因为它没有显示我的水平滚动条。
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);
}
从桌子上取下ID,然后将其放在桌子周围的div上。
它应该可以满足您的需求,但是您可能还需要将width:100%添加回表中。
编辑:弄清楚我会在这里添加一个简单的工作示例。http://codepen.io/anon/pen/qaGARr?editors=1100#0
.scroll {
overflow-x:auto;
width:100%;
}
table {
width:100%;
min-width:700px;
}
如果宽度低于700像素,则会显示滚动条
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句