1

I had previously posted regarding this 7 months ago, and someone was kind enough to point me to the right solution: bootstrap 3 responsive table with fixed first column

However, this suddenly stopped working, and the fixed column is no longer fixed. To see it in action, go to: http://nasgame.apphb.com (example data: search for Matt Vincent and pick the Pro)

The first column now scrolls with the rest of the content.

This is the operative code:

jquery

$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
});
});

css

.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
    display: none;
}
}
Community
  • 1
  • 1
CGross
  • 493
  • 1
  • 7
  • 18

3 Answers3

1

It looks to me like it is working, but because some of the cloned table cells have a transparent background you can see the table behind them:

enter image description here

In my screenshot you can see that the odd rows look fine, since the cells have a gray background.

You could probably fix this by giving the even cells a background too.

I think this would probably do it:

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #fff;
}

Or, as 3rror404 suggested in a comment, set a background-color on the entire table:

.table-striped > tbody {
    background-color: #fff;
}
Jonathan Nicol
  • 3,158
  • 1
  • 21
  • 22
  • 2
    You could actually just set it directly on the `tbody` (`.table-striped > tbody`) – Turnip Jun 11 '14 at 13:16
  • @JonathanNicol I removed the table stripe as its not really needed and mobile matters here more than anything else. I am also now forcing the background color as recommended. Here is the updated link, http://nasgame.apphb.com/, you can just directly search for Matt Vincent. jquery and css are the same. using the latest IOS and both Chrome and Safari, it simply won't keep that column in place! – CGross Jun 11 '14 at 14:03
  • Its working in Chrome on the desktop when I shrink the browser size, but its only on ios that its not staying fixed. I have a Kindle Fire, and it correctly stays fixed there. – CGross Jun 12 '14 at 22:06
  • I had a few people confirm its working fine on their Android phones too. – CGross Jun 12 '14 at 22:47
  • 1
    Yeah I see what you mean on iOS. Sorry, I don't have the tools to remotely debug on iOS. I tried Edge Inspect but could only inspect the form, not the table. – Jonathan Nicol Jun 12 '14 at 23:24
1
.table-responsive>.fixed-column {
  position: fixed;
}

this change had a better result, but not quite right yet.

nasgame

Community
  • 1
  • 1
danilopopeye
  • 9,610
  • 1
  • 23
  • 31
1

Responsive table with fixed column without using any jQuery or javascript.

  • HTML

    <div class="table">
  <div class="table-scroll">
    <table class="table-main">
        <thead>
            <tr>
                <th class="fix-col">Name</th>
                <th>Designation</th>
                <th>Experience</th>
                <th>Technology</th>
                <th>Company</th>
                <th>Location</th>
                <th>Contact No.</th>
                <th>Address</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
            <tr>
                <td class="fix-col">Bob</td>
                <td>Front End Developer</td>
                <td>5 yrs</td>
                <td>HTML,CSS</td>
                <td>Google</td>
                <td>California</td>
                <td>9876543210</td>
                <td>Google Office</td>
            </tr>
        </tbody>
    </table>
</div>

  • CSS

    .table-main {
    border: none;
    border-right: solid 1px rgb(75, 90, 102);
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}

.table-main thead th {
    background-color: rgb(203, 220, 233);
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}

.table-main tbody td {
    border-bottom: solid 1px rgb(75, 90, 102);
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}

.table {
    position: relative;
}

.table-scroll {
    margin-left: 131px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 500px;
}

.table-main .fix-col {
    border-left: solid 1px rgb(75, 90, 102);
    border-right: solid 1px rgb(75, 90, 102);
    left: 0;
    position: absolute;
    top: auto;
    width: 110px;
}

Here's is JSFiddle Link : https://jsfiddle.net/mahendra_ahada/vqkxcn3s/1/

Mahendra pratap singh ahada
  • 255
  • 3
  • 10