表格树上的水平滚动条答案

【问题标题】：Horizontal Scrollbar on tree of tables表格树上的水平滚动条
【发布时间】：2015-11-10 05:38:31
【问题描述】：

我有一个 div，在那个 div 里面我有一张桌子。在表格内部，我有许多行，其中包含一个可点击的跨度、一个复选框、一个标签和一个 div。可点击的 span 将从服务器获取数据，并将遵循相同结构的新表附加到当前 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...

【问题讨论】：

您可以尝试指定“溢出：滚动；”而不是'溢出：自动;'
@Jase 运气不好。不影响任何东西。
你能发布你的html吗？
@Jase HTML 在树状视图中一直动态重复。我将发布开头，您可以猜测其余部分。
您应该能够通过添加样式 white-space:nowrap; 来防止复选框和标签换行到下一行。到 td 元素。这应该迫使它比包含的 div 更宽，然后应该出现滚动条。

标签： html css asp.net asp.net-mvc-5

【解决方案1】：

您应该能够通过添加样式 white-space:nowrap; 来防止复选框和标签换行到下一行。到 td 元素。这应该迫使它比包含的 div 更宽，然后应该出现滚动条。

【讨论】：

【解决方案2】：

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

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

【讨论】：