表格树上的水平滚动条

我有一个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

表格树上的水平滚动条

回答

相关问题