Fatal编程技术网
  • html/
  • 带有HTML和CSS的表格滚动

带有HTML和CSS的表格滚动

html css

带有HTML和CSS的表格滚动,html,css,html-table,Html,Css,Html Table,我有一个类似的表格，我用数据填充它 <table id="products-table" style="overflow-y:scroll" > <thead> <tr> <th>Product (Parent Product)</th> <th>Associated Sites</th> <th>Ac

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

<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>
但是scroll不起作用，我想固定表格的高度，如果超过了，则使用scrollbar

固定标题的表格


标题1
标题2
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
新项目
对于那些想知道如何用多个标题实现Garry解决方案的人，这就是：

#包装器{
宽度：235px；
}
桌子{
边框：1px纯黑；
宽度：100%；
}
th，
运输署{
宽度：100px；
边框：1px纯黑；
}
thead>tr{
位置：相对位置；
显示：块；
}
t车身{
显示：块；
高度：80px；
溢出：自动；
}

专栏1
专栏2
第1行
第1行
第2行
第2行
第3行
第3行
第4行
第4行
仅适用于Chrome浏览器，但它可以适应其他现代浏览器。表格返回到其他BRW中带有滚动条的常用表格。 使用CSS3 FLEX属性

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

  • 将标题单元格的内容放入div
  • 修复标题内容，请参阅CSS
    • 表{margin top:20px；显示：内联块；溢出：自动；}
第th div{页边距顶部：-20px；位置：绝对；}
    请注意，由于以下原因，可以将表格显示为内联块：

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

    /*滚动表规则*/
表{页边距顶端：20px；显示：内联块；溢出：自动；}
第th div{页边距顶部：-20px；位置：绝对；}
/*设计*/
表{边框折叠：折叠；}
tr:n个孩子（偶数）{background:#EEE；}
    
第一秒
富吧
富富酒吧
富吧
福吧
富吧
富吧
富吧
富吧
富吧
富吧
富吧
富吧
富吧
富吧
    向溢出的HTML表格元素添加渐变，以更好地指示有更多内容要滚动

    • 固定表头的表格
    • 溢流涡旋梯度
    • 自定义滚动条
    请参见下面的实时示例：

    $（“#滚动表”）.html（“”）；
$（“#单元格”）.append（“第一列第二列”）；
对于（变量i=0；i<40；i++）{
$（“#scrolltable>table>tbody”）.append（“+”foo“+”bar“+”）；
}
    /*带有固定标题的表格*/
桌子
泰德{
宽度：100%；
文本对齐：左对齐；
}
#滚动表{
边缘顶部：50px；
高度：120px；
溢出：自动；
宽度：200px；
}
#滚动表{
边界塌陷：塌陷；
}
#滚动表tr:n个子项（偶数）{
背景：#EEE；
}
#滚动表第四分区{
位置：绝对位置；
利润上限：-30px；
}
/*自定义滚动条*/
：-webkit滚动条{
宽度：8px；
}
：-webkit滚动条轨迹{
盒影：嵌入0.6px rgba（0,0,0,0.3）；
边界半径：10px；
}
：-webkit滚动条拇指{
边界半径：10px；
盒影：嵌入0.6px rgba（0,0,0,0.5）；
}
/*溢流涡旋梯度*/
.溢出滚动梯度{
位置：相对位置；
}
.溢出滚动梯度：：之后{
内容：''；
位置：绝对位置；
底部：0；
宽度：240px；
高度：25px；
背景：线性梯度（rgba（255，255，255，0.001），白色）；
指针事件：无；
}
    无论现在值多少钱：这里还有另一个解决方案：

    • 在
      显示：内联块中创建两个div
    • 在第一个div中，放置一个只有标题的表（header table
      tabhead
      ）
    • 在第二个div中，放置一个带有标题和数据的表（数据表/完整表
      tabfull
      ）
    • 使用JavaScript，使用
      setTimeout（（）=>{/*…*/}）
      在呈现后/在使用
      fetch的结果填充表后执行代码
    • 测量数据表中每个th的宽度（使用
      clientWidth
      ）
    • 将相同的宽度应用于标题表中的对应项
    • 将数据表标题的可见性设置为隐藏，并将页边距顶部设置为数据表标题像素的-1*高度
    通过一些调整，这就是要使用的方法（为了简洁/简单，我使用了d3js，同样的操作也可以使用普通DOM完成）：

    等待渲染周期的优点是使用浏览器布局引擎，而不考虑过程-对于任何类型的标题；它不受特殊条件或单元格内容长度相似的限制。它还可以正确调整可见的滚动条（如在Windows上）

    我在这里提供了一个完整示例的代码笔：

    这对我来说很有用

    演示：
    请为溢出表尝试此代码 它只在div标签上工作

    .outer{
溢出y：自动；
高度：300px；
}
.外部{
宽度：100%；
-布局：固定；
}
.外大街{
文本对齐：左对齐；
排名：0；
位置：粘性；
背景色：白色；
}
    
MYCR

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

    

    <table border="1px" class="flexy">
    <caption>Lista Sumnjivih vozila:</caption>
    <thead>
        <tr>
            <td>Opis Sumnje</td>
        <td>Registarski<br>broj vozila</td>
        <td>Datum<br>Vreme</td>
        <td>Brzina<br>(km/h)</td>
        <td>Lokacija</td>
        <td>Status</td>
        <td>Akcija</td>
        </tr>
    </thead>
    <tbody>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>

        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>


        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>

    </tbody>
</table>

    

    caption {
    display: block;
    line-height: 3em;
    width: 100%;
    -webkit-align-items: stretch;
    border: 1px solid #eee;
}

       .flexy {
            display: block;
            width: 90%;
            border: 1px solid #eee;
            max-height: 320px;
            overflow: auto;
        }

        .flexy thead {
            display: -webkit-flex;
            -webkit-flex-flow: row;
        }

        .flexy thead tr {
            padding-right: 15px;
            display: -webkit-flex;
            width: 100%;
            -webkit-align-items: stretch;
        }

        .flexy tbody {
            display: -webkit-flex;
            height: 100px;
            overflow: auto;
            -webkit-flex-flow: row wrap;
        }
        .flexy tbody tr{
            display: -webkit-flex;
            width: 100%;
        }

        .flexy tr td {
            width: 15%;
        }

    

    setTimeout(() => { // pass one cycle
  d3.select('#tabfull')
    .style('margin-top', (-1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height) + 'px')
    .select('thead')
      .style('visibility', 'hidden');
  let widths=[]; // really rely on COMPUTED values
  d3.select('#tabfull').select('thead').selectAll('th')
    .each((n, i, nd) => widths.push(nd[i].clientWidth));
  d3.select('#tabhead').select('thead').selectAll('th')
    .each((n, i, nd) => d3.select(nd[i])
          .style('padding-right', 0)
          .style('padding-left', 0)
          .style('width', widths[i]+'px'));
})

    

    $(function() 
{
    Fixed_Header();
});

    

    function Fixed_Header()
{
    $('.User_Table thead').css({'position': 'absolute'});
    $('.User_Table tbody tr:eq("2") td').each(function(index,e){
        $('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $('.User_Table thead').outerHeight();
    $('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
    $('.User_Table').css({'margin-top' : Header_Height+"px"});
}

    

    <div style="overflow:auto">
    <table id="table2"></table>
</div>