表格树

Question

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

Answer 1

你应该能够通过添加样式white-space来保持复选框和标签不被包装到下一行：nowrap;到td元素。这应该强制它比包含div更宽，然后应该出现滚动条。

Answer 2

将max-height：500px添加到#myTable。

当高度增加超过500像素时，您将获得垂直滚动条;如果宽度增加超过250像素，您将获得水平滚动条。