Sticky table header with scrollable x but overflown y

So, the title might be a bit confusing, so here's a summary -

The table rows need to be all visible, so when the client scrolls, he doesn't scroll the table, but the page itself, to see the other rows

The table columns need to be scrollable, since there are tons of them, i.e - overflow-x: scroll

And lastly, the table header needs to be sticky when the client scrolls up and down the page, but also with scroll-x.

This code pen shows how the table should look, except the sticky header:
https://codepen.io/anon/pen/Xyqqew

Here's the CSS

div {

    overflow-x: scroll;

    width: 80%;

}



table {

    white-space: nowrap;

    background-color: darkgrey;

    border: black solid 1px;

    border-collapse: collapse;

}



th,td {

    border: black solid 1px;

}



td {

  background-color: lightblue;

}

Here's the HTML

<div>

  <table>

    <thead>

      <tr>

        <th>column 1</th>

        <th>column 2</th>

        <th>column 3</th>

        <th>column 4</th>

        <th>column 5</th>

        <th>column 6</th>

        <th>column 7</th>

        <th>column 8</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tbody>

  </table>

</div>

I would prefer solutions using css and possibly react.js, but not jQuery

asked Nov 24 '18 at 13:24

Wassap124

10810

add a comment |

So, the title might be a bit confusing, so here's a summary -

The table rows need to be all visible, so when the client scrolls, he doesn't scroll the table, but the page itself, to see the other rows

The table columns need to be scrollable, since there are tons of them, i.e - overflow-x: scroll

And lastly, the table header needs to be sticky when the client scrolls up and down the page, but also with scroll-x.

This code pen shows how the table should look, except the sticky header:
https://codepen.io/anon/pen/Xyqqew

Here's the CSS

div {

    overflow-x: scroll;

    width: 80%;

}



table {

    white-space: nowrap;

    background-color: darkgrey;

    border: black solid 1px;

    border-collapse: collapse;

}



th,td {

    border: black solid 1px;

}



td {

  background-color: lightblue;

}

Here's the HTML

<div>

  <table>

    <thead>

      <tr>

        <th>column 1</th>

        <th>column 2</th>

        <th>column 3</th>

        <th>column 4</th>

        <th>column 5</th>

        <th>column 6</th>

        <th>column 7</th>

        <th>column 8</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tbody>

  </table>

</div>

I would prefer solutions using css and possibly react.js, but not jQuery

asked Nov 24 '18 at 13:24

Wassap124

10810

add a comment |

So, the title might be a bit confusing, so here's a summary -

The table rows need to be all visible, so when the client scrolls, he doesn't scroll the table, but the page itself, to see the other rows

The table columns need to be scrollable, since there are tons of them, i.e - overflow-x: scroll

And lastly, the table header needs to be sticky when the client scrolls up and down the page, but also with scroll-x.

This code pen shows how the table should look, except the sticky header:
https://codepen.io/anon/pen/Xyqqew

Here's the CSS

div {

    overflow-x: scroll;

    width: 80%;

}



table {

    white-space: nowrap;

    background-color: darkgrey;

    border: black solid 1px;

    border-collapse: collapse;

}



th,td {

    border: black solid 1px;

}



td {

  background-color: lightblue;

}

Here's the HTML

<div>

  <table>

    <thead>

      <tr>

        <th>column 1</th>

        <th>column 2</th>

        <th>column 3</th>

        <th>column 4</th>

        <th>column 5</th>

        <th>column 6</th>

        <th>column 7</th>

        <th>column 8</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tbody>

  </table>

</div>

I would prefer solutions using css and possibly react.js, but not jQuery

asked Nov 24 '18 at 13:24

Wassap124

10810

So, the title might be a bit confusing, so here's a summary -

The table rows need to be all visible, so when the client scrolls, he doesn't scroll the table, but the page itself, to see the other rows

The table columns need to be scrollable, since there are tons of them, i.e - overflow-x: scroll

And lastly, the table header needs to be sticky when the client scrolls up and down the page, but also with scroll-x.

This code pen shows how the table should look, except the sticky header:
https://codepen.io/anon/pen/Xyqqew

Here's the CSS

div {

    overflow-x: scroll;

    width: 80%;

}



table {

    white-space: nowrap;

    background-color: darkgrey;

    border: black solid 1px;

    border-collapse: collapse;

}



th,td {

    border: black solid 1px;

}



td {

  background-color: lightblue;

}

Here's the HTML

<div>

  <table>

    <thead>

      <tr>

        <th>column 1</th>

        <th>column 2</th>

        <th>column 3</th>

        <th>column 4</th>

        <th>column 5</th>

        <th>column 6</th>

        <th>column 7</th>

        <th>column 8</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tr>

        <td>Lorem ipsum dolor sit amet, consectetur</td>

        <td>adipiscing elit, sed do eiusmod tempor</td>

        <td>incididunt ut labore et dolore</td>

        <td>magna aliqua</td>

        <td>Ut enim ad minim veniam</td>

        <td>quis nostrud exercitation ullamco</td>

        <td>laboris nisi ut aliquip ex ea commodo consequat</td>

        <td>

          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

        </td>

      </tr>

      <tbody>

  </table>

</div>

I would prefer solutions using css and possibly react.js, but not jQuery

javascript css reactjs

asked Nov 24 '18 at 13:24

Wassap124

10810

asked Nov 24 '18 at 13:24

Wassap124

10810

asked Nov 24 '18 at 13:24

Wassap124

10810

asked Nov 24 '18 at 13:24

Wassap124

10810

asked Nov 24 '18 at 13:24

Wassap124

10810

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458598%2fsticky-table-header-with-scrollable-x-but-overflown-y%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk