相关疑难解决方法(0)

如何在html表格上显示滚动条

我正在写一个页面,我需要一个html表来维持一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.

我希望它看起来像这个网址中的方法2:http://www.cssplay.co.uk/menu/tablescroll.html

我试过这样做但没有滚动条出现:

    <table border=1 id="qandatbl" align="center">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

CSS:

tbody { 
    height:80em;  
    overflow:scroll;
                }

Run Code Online (Sandbox Code Playgroud)

html css scroll html-table overflow

Bru*_*dit

2017 08-13

72
推荐指数

5
解决办法

35万
查看次数

边框样式不适用于粘性位置元素

我不知道为什么我的边框样式不适用于position: sticky;属性.我想在我的粘性表头上设置边框样式.但我不想使用透明的背景色.我怎样才能实现它？以下是我的问题和JSFiddle链接的示例代码

#wrapper {
  width: 400px;
  height: 200px;
  overflow: auto;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

table tr th,
table tr td {
  border: 2px solid;
}

table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #edecec;
}

Run Code Online (Sandbox Code Playgroud)

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td> …

Run Code Online (Sandbox Code Playgroud)

html css

Cat*_*ysm

2018 09-10

20
推荐指数

6
解决办法

8592
查看次数