时间戳

首页 > 解决方案 > 使用flex时如何使表格滚动？

css - 使用flex时如何使表格滚动？

问题描述

我尝试创建一个布局，在我的主视图中有一个表格。表格可能比实际的主视图宽，在这种情况下，我想滚动主视图而不是侧边栏。

现在表格溢出了，我滚动了整个窗口，这不是那么漂亮。

这个codepen显示了我的问题：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>

如果窗口足够小，您会看到表格停止缩小，这没关系，但溢出是针对整个页面的，溢出区域的背景也不是正确的背景。我正在使用顺风来样式页面。

标签： csstailwind-css

解决方案

可以添加overflow-auto类以content在该content区域中滚动：

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

一个例子：

<link href="https://www.unpkg.com/tailwindcss@2.1.1/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>

推荐阅读