CSS中带有水平滚动条的动态表

马库斯

在主页上工作时,我遇到了以下问题:我想显示一个表-可以通过复选框选择表的列数。另外,我的网站应该可以在手机上工作,因此我在相应的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有水平滚动条的表(无列限制,动态创建表)

来自分类Dev

带有水平滚动条的水平滚动条

来自分类Dev

使用 div 动态显示列,第一列固定,其余全部带有水平滚动条

来自分类Dev

超过12个带有水平滚动条的引导程序列

来自分类Dev

带有水平滚动条的pre / code元素破坏了Firefox的弹性布局

来自分类Dev

Qt Creator(设计器):带有水平滚动条的单行文本

来自分类Dev

R闪亮的桌子,顶部和底部均带有水平滚动条

来自分类Dev

在字段集中具有水平滚动条的表格

来自分类Dev

CSS最小宽度没有水平滚动条显示

来自分类Dev

Xcode的Interface Builder中没有水平滚动条

来自分类Dev

为什么在此html页面中有水平滚动条

来自分类Dev

为什么我有一个带有 css 和 html 的水平滚动条

来自分类Dev

带有水平滚动的引导行

来自分类Dev

CSS没有水平滚动

来自分类Dev

如何摆脱CSS中的水平滚动条

来自分类Dev

如何使用引导程序在没有水平滚动条的情况下打印换行文本?

来自分类Dev

如何在没有水平滚动条的情况下隐藏<body>左侧的DOM元素?

来自分类Dev

带有垂直滚动条的引导表

来自分类Dev

带有div内滚动条的表

来自分类Dev

CSS Grid导致水平滚动条

来自分类Dev

CSS Bootstrap:出现水平滚动条

来自分类Dev

为什么填充的底部在带有滚动条的CSS中失败?

来自分类Dev

水平滚动条?

来自分类Dev

iframe 中的水平滚动条

来自分类Dev

带有水平进度条的启动画面

来自分类Dev

没有带有Bootstrap 3的ArizonaJS代码高亮显示的水平滚动条

来自分类Dev

带有水平滚动默认值的表格

来自分类Dev

带有标签滚动条的列表

来自分类Dev

带有滚动条的PyQt QToolBar

Related 相关文章

热门标签

归档