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

问题描述

我有一个类似于填充数据的表格

 < table id =products-tablestyle =overflow-y：scroll> 
< thead> 
< tr> 
< th>产品（母产品）< / th> 
< th>相关网站< / th> 
< th>操作< / th> 
< / tr> 
< / thead> 
< tbody> 
 @for（int i = 0; i  {
< tr> ¥b $ b< td> 
< a href =Edit>< strong> @ Model.ElementAt（i）.Name< / strong>< / a>< br / 
< / td> 
< td> 
< span class =lesser>< / span> 
< / td> 
< td> @ Html.ActionLink（编辑产品，编辑，产品）< br / 
 @ Html.ActionLink（Associate Site，Associate，Products）
< / td> 
< / tr> 
} 
< tr> 
< / tbody> 
< / table> 
  

和CSS类似

 ＃products-table 
 {
 width：200px; 
 height：400px; 
 overflow：scroll; 
} 
  

但滚动不起作用，我想修正表的高度如果超过，则使用滚动条

解决方案

第一解决方案

 < table cellspacing =0cellpadding =0border =0width =325> 
< tr> 
< td> 
< table cellspacing =0cellpadding =1border =1width =300> 
< tr style =color：white; background-color：gray> 
< th>标题1< / th> 
< th>标题2< / th> 
< / tr> 
< / table> 
< / td> 
< / tr> 
< tr> 
< td> 
< div style =width：320px; height：60px; overflow：auto;> 
< table cellspacing =0cellpadding =1border =1width =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> 
< / table> 
< / div> 
< / td> 
< / tr> 
< / table> 
  

结果

这在所有浏览器中都有效

演示jsfiddle

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

解决方案

First Solution

<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:60px; 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>   
     </table>  
   </div>
  </td>
 </tr>
</table>

Result

This is working in all browser

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

Second Solution

This is specific to your Code only but It Might have Problem with IE9 so i would suggest first Solution

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

Or Table with fixed header

tbody {
 width: 200px;
 height: 400px;
 overflow: auto;
}

Result

Demo jsfidle http://jsfiddle.net/nyCKE/7588/

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