table表格布局,表头固定不动,表身超出可滑动

news/2024/10/17 23:22:03/

效果图:



HTML:

<table class="tablehead">
    <tr>
        <td style="width:40px;">序号</td>
        <td>品名</td>
        <td style="width:150px;">货号</td>
        <td style="width:100px;">原价</td>
        <td style="width:100px;">单价</td>
        <td style="width:100px;">数量</td>
        <td style="width:200px;">小计</td>
        <td style="width:136px;">操作</td>
    </tr>
</table>
<div class="tablebodyBox">
    <table class="tablebody">

        <td style="width:40px;">序号</td>
        <td>品名</td>
        <td style="width:150px;">货号</td>
        <td style="width:100px;">原价</td>
        <td style="width:100px;">单价</td>
        <td style="width:100px;">数量</td>
        <td style="width:200px;">小计</td>
        <td style="width:120px;">操作</td>

    </table>
</div>

CSS:


.tablehead {
        table-layout:fixed;
        clear:both;
        width:100%;
        height:40px;
        border:#ccc 1px solid;
        margin-top:10px;
        background-color:#eee;
    }
    .tablebody {
        table-layout:fixed;
        clear:both;
        width:100%;
        margin-top:-1px;
    }
    table td {
        border:#ccc 1px solid;
        text-align:center;
    }
    table tr {
        width:100%;
        height:40px;
    }

    .tablebodyBox {
        overflow-x: hidden;
        width:100%;
        overflow-y:scroll;
        border-bottom:1px solid #ccc;
    }


http://www.ppmy.cn/news/486080.html

相关文章

Nacos SpringBoot 动态配置 不生效

写法参考了 官方文档 Nacos Spring 快速开始 Nacos Spring Boot 快速开始 maven <dependency><groupId>com.alibaba.boot</groupId><artifactId>nacos-config-spring-boot-starter</artifactId><version>0.2.8</version> </d…

word表格如何令文字上下居中

第一步&#xff1a;在word文档中插入需要的表格&#xff0c;如图所示。 第二步&#xff1a;如下图所示&#xff0c;单击红色圆圈标记的图标&#xff0c;表格被全部选中&#xff0c;如图所示。 第三步&#xff1a;在表格中&#xff0c;单击鼠标右键选中“表格属性”选项&#xf…

在word文档表中插入图片不变形

在word文档表中插入图片不变形 目录 在word文档表中插入图片不变形 1、点击左上角【全选图标 】选中表格&#xff0c;鼠标右键点击【表格属性】 2、点击【选项】点击 取消勾选【自动重调尺寸以适应内容】&#xff0c;最后点击【确定】 ​3、依次点击【插入】【图片】点击图片…

Word表格如何设置上下居中对齐、左右居中对齐

选中表格或表格内容&#xff0c;单击右键选择“单元格对齐方式”&#xff0c;选择上下居中即可&#xff01;

EXCEL中如何让某些行列固定不动

复制过来显示有问题&#xff0c;可以去http://jingyan.baidu.com/article/9faa72315531dd473c28cb33.html看。 有时候EXCEL中数据较多&#xff0c;需要来回查看数据&#xff0c;一移动位置就看不见第一行或者第一列了。怎么样能让前几行列固定下来呢&#xff1f;本例介绍窗口冻…

Word表格不能调整宽度的解决方法

遇到word表格宽度不能调整时&#xff0c;原因多半是因为固定了列宽度&#xff0c;解决办法是取消关于列宽的固定。 具体操作为&#xff1a;在表格属性里面通过“前一列”和“后一列”遍历所有列&#xff0c;取消复选框。

表格数据可滑动,表头固定不动效果

1.效果图如下&#xff1a; 2.jsp代码&#xff1a;注意&#xff1a;table样式用的bootstrap样式 <table class"table table-bordered" ><thead ><tr><td style"width:19.57%">月份</td><td style"width:24.25%"…

word之强制拖动表格

有时word表格无法拖动&#xff0c;这时可以按住ctrl键&#xff0c;强制拖动表格