HTML 水平滾動未顯示

Question

我無法顯示水平滾動條。 我仍然可以使用觸控板水平滾動，並且所有內容的格式都正確，但欄本身沒有顯示，因此您可以使用它用鼠標在桌子上水平移動。 任何幫助解決這個問題將不勝感激，謝謝！

HTML - 通過 React 框架

{/* Order */}
            <div className ="order">
                <table>
                    <tbody>
                        <tr>
                            <td>Id</td>
                            <td>Farm</td>
                            <td>Field</td>
                            <td>W/O</td>
                            <td>Job</td>
                            <td>APA</td>
                            <td>Acres</td>
                            <td>Status</td>
                            <td>Solution</td>
                            <td>Date Ordered</td>
                            <td>Date Sampled</td>
                            <td>Date Billed</td>
                            <td>Price</td>
                            <td>Years Billed</td>
                            <td>Split 1</td>
                            <td>Split 2</td>
                        </tr>
                    
                        {orders.map((order, num) => {
                            let splitOne = ""
                            let splitTwo = ""
                            if(order.split_one_name.length > 1){
                                splitOne = `${order.split_one_name} - ${order.split_one_share}`
                            }
                            if(order.split_two_name.length > 1){
                                splitTwo = `${order.split_two_name} - ${order.split_two_share}`
                            }

                            return (
                            <tr key={order.id}>
                                <td>{order.id}</td>
                                <td>{order.farm}</td>
                                <td>{order.field}</td>
                                <td>{startInputMode(order.wo_num, num, 'wo_num')}</td>
                                <td>{startInputMode(order.job_num, num, 'job_num')}</td>
                                <td>{order.firstname + " " + order.lastname}</td>
                                <td>{order.acres}</td>
                                <td>{startInputMode(order.status, num, 'status')}</td>
                                <td>{order.solution}</td>
                                <td>{order.date_ordered.slice(0,10)}</td>
                                <td>{startInputMode(order.date_sampled, num, 'date_sampled')}</td>
                                <td>{startInputMode(order.date_billed, num, "date_billed")}</td>
                                <td>{order.price}</td>
                                <td>{order.years_billed}</td>
                                <td>{splitOne}</td>
                                <td>{splitTwo}</td>
                            </tr>)
                        })}
                    </tbody>
                </table>
            </div>

CSS

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    align-self: center;
    justify-self: center;
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    min-width: 100px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  
  .order {
    display: block;
    grid-area: orders;
    height: 100%;
    width: 100%;
    align-self: center;
    justify-self: center;
    max-height: 520px;
    
    overflow: scroll;
    justify-content: center;
    align-content: center;
   }
  
   ::-webkit-scrollbar {
    width: 5px;
    height: 0px;
  }
  
  ::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px grey;
   border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
   background: grey;
   border-radius: 10px;
  }

Answer 1

在您的表格 css 中，將overflow: scroll更改為overflow: auto 。

然后從::-webkit-scrollbar刪除height: 0px 。

::-webkit-scrollbar 文檔