在CSS中使用水平滚动条的动态表格

-1

在主页上工作我遇到以下问题：我想显示一个表格 - 可以使用复选框选择表格列的数量。另外，我的网站应该在手机上工作，所以我放入了相应的元线。在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); 
}

来源

2016-10-27 Markus

采取ID假表，并把它放在一个div AROUND表。

它应该做你正在寻找的东西，但是你也可能想要在表格中添加一个宽度：100％。

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

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

如果你去下面700像素宽，滚动条显示出来

来源

2016-10-27 21:45:45 Sean

在CSS中使用水平滚动条的动态表格

回答

相关问题