CODEWITHSUNDEEP
htmlcsshtml-tablesticky
user3900778
user3900778

Reputation: 227

Sticky td (headers) with rowspan

I would like to create rowspan on my sticky header but can't get it work.

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

What i need is to connect first and second td in 'Header 1'

Can someone help me with this problem ?

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;
}

Upvotes: 1

Views: 2580

Answers (1)

crazymatt
crazymatt

Reputation: 3286

Your code is actually working correctly. You are not seeing the rowspan working because the absolute positioning that is used for the sticky header. I updated your JS Fiddle with a few tweeks so you can see what is going on. http://jsfiddle.net/x62v5ea8/2/

You can see in the HTML I commented out the cell that will used by the rowspan and added a .test class with a height and background color so you can see that the cell is now fully expanding. Alternatively you can remove the position: absolute and you see the same results but your header wont be sticky anymore.

Upvotes: 2

Related Questions