Question

我写了一页,我需要一张html表,以保持一个固定的规模。我需要坐在桌前的各位负责人随时留在那里,但我还需要桌上的人,不管桌上有多少人。

我愿看一看这个尿中的第2种方法:。

I have tried doing this but no scrollbar appears:

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

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

Answer 1

与此类似?

http://jsfiddle.net/TweNm/

设想将<代码><table> in a non-statically placeed <div>overflow:auto/code> CSS 财产。然后将<代码><、thead>、中的内容绝对定位。

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}

<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
          <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
          <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
          <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
          <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
          <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
          <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
          <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
          <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
          <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
          <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
          <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
          <!-- etc... -->
          <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>

Answer 2

页: 1

<>Update:

最初的答复是10年前写的。几天后,有许多精良的元件供表态和以适当方式显示。因此,我建议,其中一部分是免费的或有偿的,以确保你们已经支持这些组成部分已经执行的许多近似案件。

Answer 3

接受的回答提供了一个良好的起点,但如果你重新调整框架,改变一栏的宽度,甚至改变表格数据,则负责人将会以各种方式获得信息。我所看到的所有其他例子都存在类似的问题,或对表格布局施加了一些严重限制。

我认为,我最后要解决所有这些问题。最终产品是可靠和易于用作正常表格的。

这里有一个例子,它具备复制《任择议定书》中提到的表格所需的所有特征:jsFiddle/strong>。

必须改变肤色和边界,使之与提及内容相同。关于如何作出这些改动的信息,见安保部的评论意见。

Here s the code:

/*the following html and body rule sets are required only if using a % width or height*/ /*html { width: 100%; height: 100%; }*/ body { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0 20px 0 20px; text-align: center; background: white; } .scrollingtable { box-sizing: border-box; display: inline-block; vertical-align: middle; overflow: hidden; width: auto; /*if you want a fixed width, set it here, else set to auto*/ min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/ height: 188px/*100%*/; /*set table height here; can be fixed value or %*/ min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/ font-family: Verdana, Tahoma, sans-serif; font-size: 15px; line-height: 20px; padding: 20px 0 20px 0; /*need enough padding to make room for caption*/ text-align: left; } .scrollingtable * {box-sizing: border-box;} .scrollingtable > div { position: relative; border-top: 1px solid black; height: 100%; padding-top: 20px; /*this determines column header height*/ } .scrollingtable > div:before { top: 0; background: cornflowerblue; /*header row background color*/ } .scrollingtable > div:before, .scrollingtable > div > div:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; } .scrollingtable > div > div { min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/ max-height: 100%; overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/ overflow-x: hidden; border: 1px solid black; /*border around table body*/ } .scrollingtable > div > div:after {background: white;} /*match page background color*/ .scrollingtable > div > div > table { width: 100%; border-spacing: 0; margin-top: -20px; /*inverse of column header height*/ /*margin-right: 17px;*/ /*uncomment if using % width*/ } .scrollingtable > div > div > table > caption { position: absolute; top: -20px; /*inverse of caption height*/ margin-top: -1px; /*inverse of border-width*/ width: 100%; font-weight: bold; text-align: center; } .scrollingtable > div > div > table > * > tr > * {padding: 0;} .scrollingtable > div > div > table > thead { vertical-align: bottom; white-space: nowrap; text-align: center; } .scrollingtable > div > div > table > thead > tr > * > div { display: inline-block; padding: 0 6px 0 6px; /*header cell padding*/ } .scrollingtable > div > div > table > thead > tr > :first-child:before { content: ""; position: absolute; top: 0; left: 0; height: 20px; /*match column header height*/ border-left: 1px solid black; /*leftmost header border*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div > div:first-child, .scrollingtable > div > div > table > thead > tr > * + :before { position: absolute; top: 0; white-space: pre-wrap; color: white; /*header row font color*/ } .scrollingtable > div > div > table > thead > tr > * > div[label]:before, .scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);} .scrollingtable > div > div > table > thead > tr > * + :before { content: ""; display: block; min-height: 20px; /*match column header height*/ padding-top: 1px; border-left: 1px solid black; /*borders between header cells*/ } .scrollingtable .scrollbarhead {float: right;} .scrollingtable .scrollbarhead:before { position: absolute; width: 100px; top: -1px; /*inverse border-width*/ background: white; /*match page background color*/ } .scrollingtable > div > div > table > tbody > tr:after { content: ""; display: table-cell; position: relative; padding: 0; border-top: 1px solid black; top: -1px; /*inverse of border width*/ } .scrollingtable > div > div > table > tbody {vertical-align: top;} .scrollingtable > div > div > table > tbody > tr {background: white;} .scrollingtable > div > div > table > tbody > tr > * { border-bottom: 1px solid black; padding: 0 6px 0 6px; height: 20px; /*match column header height*/ } .scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;} .scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/ .scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/

<div class="scrollingtable"> <div> <div> <table> <caption>Top Caption</caption> <thead> <tr> <th><div label="Column 1"></div></th> <th><div label="Column 2"></div></th> <th><div label="Column 3"></div></th> <th>  <div><div>Column 4</div><div>Column 4</div></div> </th> <th class="scrollbarhead"/>  </tr> </thead> <tbody> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr> </tbody> </table> </div> Faux bottom caption </div> </div>

Answer 4

不能确定为什么没有人提到只是使用固定的头盔作要素。这对我来说是巨大的。

.tableContainerDiv {
   overflow: auto;
   max-height: 80em;
}
th {
   position: sticky;
   top: 0;
   background: white;
}

如果你需要做出反应(或相似),在“媒体”中添加一个斜线。

见。表负责人职位:或Position S打字和表标题

Answer 5

I resolved this problem by separating my content into two tables.

One table is the header row.

二级还有<代码><table> tag,但以<div>以静态高度和高流量计。

Answer 6

值得注意的是,根据您的宗旨(地雷是搜索场的自动填料结果),你可能希望高能能够改变,而且只有高压超过高时才会存在。

If you want that, replace height: x; with max-height: x;, and overflow:scroll with overflow:auto.

此外,您可使用<代码>overflow-x和over-y。如果你想要的话,显然同样的事情与<代码>width:x;横向合作。

Answer 7

If you get to the point where all the mentioned solutions don t work (as it got for me), do this:

Create two tables. One for the header and another for the body
Give the two tables different parent containers/divs
Style the second table s div to allow vertical scroll of its contents.

如同此,在您的<代码>上,

<div class="table-header-class">
    <table>
       <thead>
          <tr>
            <th>Ava</th>
            <th>Alexis</th>
            <th>Mcclure</th>
          </tr>
       </thead>
    </table>
</div>
<div class="table-content-class">
   <table>
       <tbody>
          <tr>
            <td>I am the boss</td>
            <td>No, da-da is not the boss!</td>
            <td>Alexis, I am the boss, right?</td>
          </tr>
       </tbody>
    </table>
</div>

然后,第二张表格的括号允许垂直滚动,载于。

    .table-content-class {
        overflow-y: scroll;    // use auto; or scroll; to allow vertical scrolling; 
        overflow-x: hidden;    // disable horizontal scroll 
    }

Answer 8

Very easy, just wrap the table in a div that has overflow-y:scroll; and overflow-x:scroll properties, and make the div have a width and length smaller than the table. IT WILL WORK!!!

Answer 9

The CSS: div{ overflow-y:scroll; overflow-x:scroll; width:20px; height:30px; } table{ width:50px; height:50px; }

You can make the table and the DIV around the table be any size you want, just make sure that the DIV is smaller than the table. You MUST contain the table inside of the DIV.

Answer 10

仅增加表格

style="overflow-x:auto;"

<table border=1 id="qandatbl" align="center" style="overflow-x:auto;">
    <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>

风格:

友情链接