修复了标题和第一列CSS [英] Fixed Header and First Column CSS

问题描述

我有这个表，我想让它在没有标题的情况下水平和垂直滚动，或者第一列不移动。基本上我希望它只是CSS。

I have this table and I want it to be scrolled horizontal and vertical without the header or the first column is not moving. Basically I want it to be only CSS.

.tableF { border-collapse:separate; }
        .divF /*This is for the items that are scrollable. Meaning the 2nd to the last TR*/
        {
            border:1px solid;
            width: 78%;/*adjust width of movable*/
            overflow-x:scroll;
            margin-left:6em;/*fix column in right*/
            overflow-y:invisible;
            padding-bottom:1px;
        }
        .headcol/*This is only for the first TR*/
        {
            position: absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px; /*only relevant for first row*/
            margin-top:0px; /*adjust first column to other rows*/
        }

注意：这是假设要进行移动设备优化。

感谢您的帮助。

NOTE: It is suppose to be mobile-optimized.
Thank you for the help.

推荐答案

用于表格的CSS / JS解决方案，允许它们缩小小型设备，不会牺牲表的价值，列的比较。



我们的响应表解决方案需要两个包含的文件（都链接在此页面上）：responsive-tables。 css和responsive-tables.js。



JS将帮助我们在小型设备上创建一些新元素，所以我们不必修改页面上的表格标记。 CSS应用必要的定位和溢出样式以使新元素有效。





参考链接：



http://zurb.com/playground/playground/responsive-tables/index.html

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

The JS will help us create some new elements on small devices, so we don't have to modify our table markup on the page. The CSS applies the requisite positioning and overflow styles to make the new elements work.


Refer the Link:

http://zurb.com/playground/playground/responsive-tables/index.html

这篇关于修复了标题和第一列CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！