Question

我有一个 HTML 表格，它可以水平滚动但不能垂直滚动

我想在您向下滚动时将表格的标题固定到顶部，但是当我在元素上使用 position:sticky 以及在父元素上使用 overflow-x:scroll 时，它不会粘住。

这是问题的示例小提琴 https://jsfiddle.net/a53exv28/8/

Answer 1

也许您无法将表格标题设置为水平固定，但您可以这样做

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

<div class="table-wrapper">
    <table id="consumption-data" class="data">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>  
            </tr>
            <tr>    
                <th>May</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>

            <tr>
                <th>...</th>
                <td>...</td>
                <td>...</td>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 2

请检查我的代码段，我用位置粘性做了它，你还需要指定包装器 div 高度并设置 scroll-y 属性来滚动。检查以下代码以供参考。

public enum SomeEnum {
  
  A("A"),
  
  B("B"),
  
  C("C");

  private String value;

  SomeEnum(String value) {
    this.value = value;
  }

  public String getValue() {
    return value;
  }

  @Override
  public String toString() {
    return String.valueOf(value);
  }

带有水平滚动条的表格标题的位置粘性

2 个答案: