CODEWITHSUNDEEP
csstailwind-css
Tomas Jansson
Tomas Jansson

Reputation: 23462

How to make table scroll when using flex?

I try to create a layout where I have a table in my main view. It might happen that the table is wider than the actual main view, in that case I want to scroll the main view but not the sidebar.

Now the table overflows and I scroll the whole window, which isn't that pretty.

This codepen shows my problem: https://codepen.io/tomas-jansson/pen/ExZdyMx

<body>
  <div class="parent bg-gray-900 flex flex-col h-screen text-gray-100 w-screen">
    <header class="bg-gray-800 p-4 flex border-b border-solid border-gray-600">
      <span class="flex flex-1">
        <a href="#" class="text-gray-100 flex">
          Header 1
        </a>
        <span class="text-right flex-1 mr-4">
          Header 2
        </span>
      </span>
    </header>
    <div class="main flex-1 flex">
      <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
      <div class="content flex-1">
                <div class="flex w-full h-full flex-col">
            <div class="header w-full flex bg-gray-700">
                <div class="w-full ml-6 flex flex-row">
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600" >
                    <div>
                      item title
                    </div>
                  </a>
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600 border-solid border-blue-500 border-b-2 text-blue-500" >
                    <div>
                      item title
                    </div>
                  </a>
                </div>
            </div>
            <div className="content w-full flex-1 flex">
              <div class="flex-1 flex overflow-x-scroll">
                <div class="align-middle border-b border-gray-200 flex flex-1" style="">
                  <table class="divide-y divide-gray-200 min-w-full" role="table">
                    <thead class="">
                      <tr role="row">
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col 1</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col2</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                      </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" role="rowgroup">
                      <tr role="row">
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">XXX
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">
                          PERCENTAGE</td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">5
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

If you make the window small enough you'll see that the table stops to shrink, which is ok, but the overflow is for the whole page and the background in the overflow area is not the right background either. I'm using tailwind to style page.

Upvotes: 1

Views: 376

Answers (2)

Digvijay
Digvijay

Reputation: 8947

Understanding how flex structure works would be a good start to layout the page. See the demo.

<div class="h-screen flex flex-col overflow-hidden bg-gray-100">
  <!-- Header -->
  <header class="h-12 bg-gray-200">
    <div class="flex justify-between items-center h-full">
      <div>Header 1</div>
      <div>Header 2</div>
    </div>
  </header>

  <!-- Body -->
  <div class="flex flex-1">
    <!-- Navigation -->
    <nav class="w-60 bg-gray-300">Navbar</nav>

    <!-- Main -->
    <main class="bg-gray-400 overflow-auto w-full">
      <div class="overflow-x-scroll w-full">
        <table class="divide-y divide-gray-200 w-full" role="table">
          <thead>
            <tr role="row">
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">Col 1</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">Col2</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
              <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider" colspan="1" role="columnheader">ColXXX</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200" role="rowgroup">
            <tr role="row">
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">XXX</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">PERCENTAGE</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10</td>
              <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</div>

Upvotes: 1

StepUp
StepUp

Reputation: 38094

It is possible to add overflow-auto class to content to have scroll in the content area:

<div class="main flex-1 flex">
    <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
    <div class="content flex-1 overflow-auto">
       <!-- The other code is omitted for the brevity -->
    </div>
</div>

An example:

<link href="https://www.unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">


<div class="parent bg-gray-900 flex flex-col h-screen text-gray-100 w-screen">
    <header class="bg-gray-800 p-4 flex border-b border-solid border-gray-600">
      <span class="flex flex-1">
        <a href="#" class="text-gray-100 flex">
          Header 1
        </a>
        <span class="text-right flex-1 mr-4">
          Header 2
        </span>
      </span>
    </header>
    <div class="main flex-1 flex">
      <div class="nav-bar bg-gray-800 w-60 flex-none">navbar</div>
      <div class="content flex-1 overflow-auto">
                <div class="flex w-full h-full flex-col">
            <div class="header w-full flex bg-gray-700">
                <div class="w-full ml-6 flex flex-row">
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600" >
                    <div>
                      item title
                    </div>
                  </a>
                  <a href="#" class="py-4 pl-4 pr-4 text-gray-100 hover:text-gray-300 hover:bg-gray-600 border-solid border-blue-500 border-b-2 text-blue-500" >
                    <div>
                      item title
                    </div>
                  </a>
                </div>
            </div>
            <div className="content w-full flex-1 flex">
              <div class="flex-1 flex overflow-x-scroll">
                <div class="align-middle border-b border-gray-200 flex flex-1" style="">
                  <table class="divide-y divide-gray-200 min-w-full" role="table">
                    <thead class="">
                      <tr role="row">
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col 1</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">Col2</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                        <th class="px-6 py-3 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
                            colspan="1" role="columnheader">ColXXX</th>
                      </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" role="rowgroup">
                      <tr role="row">
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">XXX
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">
                          PERCENTAGE</td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">0
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">10
                        </td>
                        <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900" role="cell">5
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

Upvotes: 1

Related Questions