粘性td(标题)与rowspan

时间:2014-10-08 22:25:48

标签: html css html-table sticky

我想在粘贴标题上创建 rowspan ,但无法使其正常工作。

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

我需要的是在“标题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;
}

1 个答案:

答案 0 :(得分:2)

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

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