时间戳

首页 > 解决方案 > 如何为div中的水平溢出添加样式

css - 如何为div中的水平溢出添加样式

问题描述

我有下表，我想overflow-x在 in 中添加样式container。

我试过了，但对我不起作用（Chrome）：

.container::-webkit-scrollbar:horizontal {
  width: 10px;
}

.container::-webkit-scrollbar-thumb:horizontal {
  height: 20px;
  background: hsla(0, 0%, 53.3%, .4);
}

和

.container::-webkit-scrollbar {
  width: 10px;
}

.container::-webkit-scrollbar-thumb {
  height: 20px;
  background: hsla(0, 0%, 53.3%, .4);
}

小提琴

<div class="container">
    <table>
        <thead>
            <tr>
                <th>Column A</th>
                <th>Column B</th>
                <th>Column C</th>
                <th>Column D</th>
                <th>Column E</th>
                <th>Column F</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
                <td>Row 1 Cell 3</td>
                <td>Row 1 Cell 4</td>
                <td>Row 1 Cell 5</td>
                <td>Row 1 Cell 6</td>
            </tr>
            <tr>
                <td>Row 2 Cell 1</td>
                <td>Row 2 Cell 2</td>
                <td>Row 2 Cell 3</td>
                <td>Row 2 Cell 4</td>
                <td>Row 2 Cell 5</td>
                <td>Row 2 Cell 6</td>
            </tr>
            <tr>
                <td>Row 3 Cell 1</td>
                <td>Row 3 Cell 2</td>
                <td>Row 3 Cell 3</td>
                <td>Row 3 Cell 4</td>
                <td>Row 3 Cell 5</td>
                <td>Row 3 Cell 6</td>
            </tr>
        </tbody>
    </table>
</div>


.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

    table, th, td {
        border: 1px solid black;
    }

    th, td {
        padding: .5em 1em;
    }

标签： cssoverflow

解决方案

运行它，它对你有用吗？

   <div class="container">
       <table>
           <thead>
               <tr>
                   <th>Column A</th>
                   <th>Column B</th>
                   <th>Column C</th>
                   <th>Column D</th>
                   <th>Column E</th>
                   <th>Column F</th>
               </tr>
           </thead>
           <tbody>
               <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
            <td>Row 1 Cell 4</td>
            <td>Row 1 Cell 5</td>
            <td>Row 1 Cell 6</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
            <td>Row 2 Cell 4</td>
            <td>Row 2 Cell 5</td>
            <td>Row 2 Cell 6</td>
        </tr>
        <tr>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
            <td>Row 3 Cell 4</td>
            <td>Row 3 Cell 5</td>
            <td>Row 3 Cell 6</td>
        </tr>
    </tbody>
       </table>
   </div>

   <style>
   .container {
       width: 30em;
       overflow-x: auto;
       white-space: nowrap;
   }

       table, th, td {
           border: 1px solid black;
       }

       th, td {
         padding: .5em 1em;
     }
 </style>

推荐阅读