1

我想在 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%;
}

任何帮助表示赞赏！

4

1 回答 1

1

这适用于我尝试过的所有现代浏览器。我不得不搞砸了一段时间，但结果似乎是你想要的。诀窍是放在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;
}
于 2013-07-01T14:56:41.697 回答