使用 HTML 和 CSS 滚动表格 [英] Table scroll with HTML and CSS

问题描述

我有一个表格，里面填满了数据

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

和类似的 CSS

 #products-table{宽度:200px；高度:400px；溢出:滚动；}

但是滚动不起作用，我想固定表格的高度，如果超过，则使用滚动条

解决方案

Table with Fixed Header

<tr><td><table cellpacing="0" cellpadding="1" border="1" width="300" ><tr style="color:white;background-color:grey"><th>标题1</th><th>头2</th></tr></td></tr><tr><td><div style="width:320px; height:80px; overflow:auto;"><table cellpacing="0" cellpadding="1" border="1" width="300" ><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr><tr><td>新项目</td><td>新项目</td></tr>

</td></tr></table>

结果

这适用于所有浏览器

演示jsfiddle http://jsfiddle.net/nyCKE/6302/

I have a table like that which i fill with a data

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

and CSS like that

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

but scroll doesn't work, I want to fix the height of the table and if it exceeds, then work with scrollbar

解决方案

Table with Fixed Header

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

Result

This is working in all browser

Demo jsfiddle http://jsfiddle.net/nyCKE/6302/

这篇关于使用 HTML 和 CSS 滚动表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！