带有行跨度的粘性 td（标题）答案

【问题标题】：Sticky td (headers) with rowspan带有行跨度的粘性 td（标题）
【发布时间】：2014-10-08 22:25:48
【问题描述】：

我想在我的 sticky header 上创建 rowspan，但无法使用。

JsFiddle： http://jsfiddle.net/x62v5ea8/1/

我需要的是在'Header 1'中连接第一个和第二个td

有人可以帮我解决这个问题吗？

HTML

<div class="my-wrapper">
    <div class="my-scroller">
        <table class="myTable">
            <thead>
                <tr>
                    <th class="my-sticky-col">Header 1</th>
                    <th class="my-sticky-col2">Header 2</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>13</th>
                    <th>14</th>
                    <th>15</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2" class="my-sticky-col">A</td>
                    <td class="my-sticky-col2">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="my-sticky-col">&nbsp;</td>
                    <td class="my-sticky-col2">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td class="my-sticky-col">C</td>
                    <td class="my-sticky-col2">&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body {
    font-size: 1em;
}
.myTable {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.myTable thead th {
    background-color: #EEE;
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.myTable tbody td {
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.myTable tbody td, .myTable thead th {
    border: 1px solid #ccc;
}
.my-wrapper {
    position: relative;
}
.my-scroller {
    margin-left: 283px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.myTable .my-sticky-col {
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}
.myTable .my-sticky-col2 {
    border-right: solid 1px #000;
    left: 142px;
    position: absolute;
    width: 120px;
}

【问题讨论】：

您的班级 my-sticky-col 由于位置：绝对而导致行跨度失败。

标签： html css html-table sticky

【解决方案1】：

您的代码实际上运行正常。您没有看到 rowspan 工作，因为 absolute 定位用于粘性标题。我用几周的时间更新了你的 JS Fiddle，这样你就可以看到发生了什么。 http://jsfiddle.net/x62v5ea8/2/

您可以在 HTML 中看到我注释掉了 rowspan 将使用的单元格，并添加了一个带有高度和背景颜色的 .test 类，因此您可以看到该单元格现在已完全展开。或者，您可以删除position: absolute，您会看到相同的结果，但您的标题不会再粘了。

【讨论】：