使用表格在 html 中创建可滚动矩阵答案

【问题标题】：Creating a scrollable matrix in html with tables使用表格在 html 中创建可滚动矩阵
【发布时间】：2017-02-05 02:27:41
【问题描述】：

我想在 html 页面中有类似矩阵的东西。表格/矩阵的内容应该是可滚动的，但行和列的标题应该是固定的，所以它们总是可见的。

我尝试使用 3 个表来做到这一点：一个用于列标题，一个用于行标题，一个用于内容本身。当所有内容都适合页面时，它看起来很好。但是，一旦没有足够的空间容纳所有内容，整个事情就会变得一团糟。如何防止这种情况发生并使表格始终显示在一行上，并在必要时添加滚动条，而不是将内容表格移动到下一行？

这是我的html：

<div class="container">
        <div class="tableparent">
                <table class = "table rowtitle table-striped">
                    <tr><td>Logo</td></tr>
                    <tr><td>1</td></tr>
                    <tr><td>2</td></tr>
                    <tr><td>3</td></tr>
                    <tr><td>4</td></tr>
                    <tr><td>5</td></tr>
                    <tr><td>6</td></tr>
                </table>


                <table class="table columntitle table-striped">

                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                    </tr>
                </table>
                <table class="table table-striped">

                    <tr>
                        <td>X</td>
                        <td></td>
                        <td>X</td>
                        <td></td>
                        <td></td>
                    </tr>


                    <tr>
                        <td>X</td>
                        <td></td>
                        <td></td>
                        <td>X</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>X</td>
                        <td></td>
                        <td>X</td>
                        <td></td>
                        <td></td>
                    </tr>                       
                    <tr>
                        <td></td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                        <td>X</td>
                    </tr>                       
                    <tr>
                        <td>X</td>
                        <td></td>
                        <td>X</td>
                        <td>X</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>X</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>X</td>
                    </tr>


                </table>


    </div>

这是 CSS 的相关部分：

    table {
      max-width: 100%;
      background-color: transparent;
      border-collapse: collapse;
      border-spacing: 0;
    }

    .table {
      white-space: nowrap;
    }

    .table th,
    .table td {
      padding: 8px;
      line-height: 20px;
      text-align: center;
      vertical-align: top;
      border: 1px solid #dddddd;
    }

    .table th {
      font-weight: bold;
    }

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.rowtitle {
    float: left;
    padding: 8px;
    border-right: 0px;
    height: 200px;
}

.rowtitle th, 
.rowtitle td {
    border-right: 0px;
}

.columntitle {
    padding: 8px;
    border-bottom: 0px;
}

.columntitle th, 
.columntitle td {
    border-bottom: 0px;
}

.tableparent {
    width: 100%;
}

任何帮助表示赞赏！

【问题讨论】：

只是想知道 - 你为什么不把所有东西都放在一张桌子上？
查看 datatables.net。这可能具有您正在寻找的功能，而无需重新发明轮子。我认为你会继续寻找如果你单独使用会破坏的用途。
我不能把它放在一个表中，因为我希望行和列是可滚动的，并且行或列标题必须随着内容滚动但也需要一直可见.因此，如果我将水平滚动到“4”行，则行标题应该在左侧保持可见/固定，而第 1、2 和 3 列被滚动并且不再对用户可见。我需要它，因为在两个方向上都可能有很多条目，例如 100。
您的问题最终解决了吗？

标签： html twitter-bootstrap html-table

【解决方案1】：

This works in all modern browsers that I tried。我不得不搞砸了一段时间，但结果似乎是你想要的。诀窍是将position:absolute 放在顶行和内容部分。我也稍微修改了你的 html

HTML（略有改动）：

<div class="container">
    <div class="tableparent">
            <table class = "table rowtitle">
                <tr><td>Logo</td></tr>
                <tr><td>1</td></tr>
                <tr><td>2</td></tr>
                <tr><td>3</td></tr>
                <tr><td>4</td></tr>
                <tr><td>5</td></tr>
                <tr><td>6</td></tr>
            </table>


            <table class="table columntitle">

                <tr>
                    <th></th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </tr>
            </table>
            <table class="table content table-striped">

                <tr>
                    <td>X</td>
                    <td></td>
                    <td>X</td>
                    <td></td>
                    <td></td>
                    <td>X</td>
                </tr>


                <tr>
                    <td>X</td>
                    <td></td>
                    <td></td>
                    <td>X</td>
                    <td></td>
                    <td>X</td>
                </tr>
                <tr>
                    <td>X</td>
                    <td></td>
                    <td>X</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>                       
                <tr>
                    <td></td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                    <td>X</td>
                </tr>                       
                <tr>
                    <td>X</td>
                    <td></td>
                    <td>X</td>
                    <td>X</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>X</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>X</td>
                    <td>X</td>
                </tr>


            </table>


</div>

CSS：

table {      
      border-collapse:collapse;
      table-layout:fixed;
    }
table * {
    height:50px;
    width:50px;
    min-width:50px;
    min-height:50px;
    margin:0px;
    padding:0px;
}

.rowtitle {
    float:left;
    opacity:1;
    z-index:3;
}

    .table th,
    .table td {
      text-align: center;
      border: 1px solid #dddddd;
    }

    .table th {
      font-weight: bold;
    }

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.columntitle {
    z-index:1;
    position:fixed;
}

.content {
    position:fixed;
    left:60px;
    top:59px;
    width:255px;
    overflow-x:auto;
    display: block;
}

【讨论】：