在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中使用水平滾動條的動態表格

回答

相關問題