Question

我的目标是创建一个具有特定条件的表：

如果显示宽度太小而无法容纳内容，请添加水平滚动条并且不要缩小单元格。
如果显示高度太小而无法容纳内容，请添加垂直滚动条并且不要缩小单元格。

我设法实现了这一点，但我有一个问题，如果显示宽度和高度都太小而无法容纳内容，垂直滚动条是完美的，但水平滚动条隐藏在垂直溢出之下。所以如果用户想看到整个第一行，他/她需要垂直滚动到最后，然后水平滚动到最后，最后垂直向上滚动才能看到第一行。
这是一个 JSFiddle 示例：https://jsfiddle.net/totsik/fr24Ldyb/7/
CSS 和 HTML：

.main-container {
   background-color: #222C2A;
   color: #F3EED9;
   margin: 3rem 5%;
}

.container {
   overflow-y: auto;
   padding: 2rem;
   min-height: 50vh;
   max-height: 70vh;
   border: 2px solid #222C2A;
}

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
}

tr.table-head-row th {
   border-style: solid;
   border-width: 2px 0;
   border-color: #F3EED9;
}

tr td {
   text-align: center;
}

tr td:first-child {
   text-align: left;
}

th {
   width: 100%;
   background: #222C2A;
   text-align: left;
   padding: 1rem 2rem;
}

td {
   font-size: 1rem;
   padding: 0.75rem 1.5rem;
   background-color: #F3EED9;
   color: #222C2A;
}

<div class="main-container">
   <div class="container">
      <table>
         <thead>
            <tr class="table-head-row">
               <th class="">header 1</th>
               <th class="">header 2</th>
               <th class="">header 3</th>
               <th class="">header 4</th>
               <th></th>
            </tr>
         </thead>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
         <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
            <td>data 4</td>
            <td><button>button</button></td>
         </tr>
      </table>
   </div>
</div>

我想要发生的是，如果高度和宽度都太小，滚动条都将可见。我应该如何更改我的代码以完成此操作？

更新： 更新了 jsfiddle。还忘了提到我希望容器 div 上的垂直滚动条而不是表格本身。

Answer 1

小提琴示例在表格中有一个最大高度，而上面的文本没有。更改表格中的最大高度

table {
   overflow-x: auto;
   display: block;
   border-collapse: collapse;
   width: 100%;
   max-height: 50vh;
}

并且两个条都显示

隐藏在垂直溢出下的水平滚动条

1 个答案: