html - 表格树上的水平滚动条

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;
    }
}

感谢任何帮助。我在 300 像素宽的分辨率下看到了这个问题。

编辑 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 更宽，然后应该出现滚动条。