Scroll in X inside column on overflow

Question

When the content of the second column overflows then all the page content is scrolled.

How can the first column be fixed in the same place when scrolling the second column on overflow-x?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row">
  <div class="col-3 bg-primary">
  </div>
  <div class="col-9">
    <table class="table">
      <tr>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d1</td>
        <td>d2</td>
      </tr>
    </table>
  </div>
</div>

Ghost · Accepted Answer · 2023-01-24 21:22:49Z

You can just hide the overflow across the page and just make the second column scrollable by using CSS like the example below:

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style type="text/css">
    body{
        overflow:hidden !important;

    }
</style>
</head>
    <div class="row">
      <div class="col-3 bg-primary" style="overflow:hidden">
      </div>
      <div class="col-9" style="overflow:auto !important;">
        <table class="table">
          <tr>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d1</td>
            <td>d2</td>
          </tr>
        </table>
      </div>
    </div>

Collectives™ on Stack Overflow

Scroll in X inside column on overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related