带有HTML和CSS的表格滚动[重复]

Question

我有一个类似的表格，我用数据填充它

<table id="products-table"  style="overflow-y:scroll" >
    <thead>
        <tr>
            <th>Product (Parent Product)</th> 
            <th>Associated Sites</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        { 
        <tr>
            <td>
                <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
            </td>
            <td>
                <span class="lesser"></span>
            </td>
            <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
                @Html.ActionLink("Associate Site", "Associate", "Products")
            </td>
         </tr>
        }
        <tr>
</tbody>
</table>

而CSS就是这样

    #products-table
{
     width: 200px;
    height: 400px;
    overflow:scroll;
}

但是scroll不起作用，我想固定桌子的高度，如果超过了，就使用scrollbar

Answer 1

对于那些想知道如何使用多个标题实现Garry的解决方案的人，这是：

#wrapper {
  width: 235px;
}

table {
  border: 1px solid black;
  width: 100%;
}

th,
td {
  width: 100px;
  border: 1px solid black;
}

thead>tr {
  position: relative;
  display: block;
}

tbody {
  display: block;
  height: 80px;
  overflow: auto;
}

<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row1</td>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
        <td>row4</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

迟来的回答，另一个想法，但非常简短。

1. 将标题单元格的内容放入div
2. 修复标题内容，请参见CSS

table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }

请注意，由于匿名表对象，可以将表显示为内联块：

必须假定[在HTML表格树结构中]元素“缺失”，表格模型才能工作。任何表元素都会自动在其周围生成必要的匿名表对象。

/* scrolltable rules */
table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }

/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }

<table style="height: 150px">
  <tr> <th><div>first</div> <th><div>second</div>
  <tr> <td>foo <td>bar
  <tr> <td>foo foo foo foo foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar bar bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
</table>

Answer 3

固定表头的表格

html prettyprint-override"><table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr style="color:white;background-color:grey">
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:320px; height:80px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>