表格樹上的水平滾動條

我有一個div，並在該div裏面我有一張桌子。在表格的內部，我有許多行，包含可點擊的跨度，複選框，標籤和div。可點擊的跨度將從服務器獲取數據，並將跟隨相同結構的新表添加到當前TD的div中。重複此操作直到沒有數據需要檢索。表格樹上的水平滾動條

我的問題是，在小的決議，標籤文字會去靠不住的，複選框下打滑和跨越，像這樣：

理想的情況下，如果標籤延伸越過表，我想添加一個水平滾動條，但我不完全確定如何。我的CSS：

@media (max-width: 500px) { 
    #div-myTableWrapper{ 
     /*EMPTY*/ 
    } 
    #myTable{ 
     border-collapse: separate; 
     background-color:#d8d8d8; 
     border: 2px solid black; 
     border-radius: 15px; 
     padding-left: 10px; 
     width:100%; 
     overflow: auto; 
     min-width:250px; 
    } 
    .subTable{ 
     margin-left:15px; 
    } 
}

任何幫助表示讚賞。我在300px寬的分辨率上看到了這個問題。

編輯1： HTML摘錄：

<table id="myTable"> 
<tr> 
    <td> 
     <span class="openBoxNode"></span> 
     <input type="checkbox" class="CheckBox"> 
     <label class="Label">Deep1</label> 
     <div id="Deep1"> 
      <table class="subTable"> 
       <tr> 
        <td> 
         <span class="openBoxNode"></span> 
         <input type="checkbox" class="CheckBox"> 
         <label class="Label">Deep2</label> 
         <div id="Deep2"> 
         etc...

來源

2015-11-06 Blankdud

您可以嘗試指定'overflow：scroll;'而不是'溢出：汽車;' – Jase

@Jase那裏沒有運氣。不影響任何東西。 – Blankdud

你能發佈你的html嗎？ – Jase

您應該可以通過添加樣式white-space：nowrap;來保持複選框和標籤不會纏繞到下一行。到td元素。這應該強制它更寬，然後包含div，然後滾動條應該出現。

來源

2015-11-09 21:38:31

添加最大高度：500像素到#myTable。

當高度增加超過500px時，將獲得垂直滾動條，如果寬度增加超過250px，則會獲得水平滾動條。

來源

2015-11-07 11:51:28

表格樹上的水平滾動條

回答

相關問題