`

table

 
阅读更多

个人笔记：兼容IE10、11/firefox/chrome

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.table1{

position:absolute; 

display: block; 

height: 48%;

  border-collapse:collapse; 

  padding-top: 52px; 

  font-size: 18px;

  /* border: 1px solid green;  */

}

.table1>thead{position: absolute;top: 0;}

.table1>thead>tr>th{table-layout:fixed;}

.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}

th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}

/*.table1>thead>tr:first-child>th{border-top: 0;}*/

/* .table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}

.table1>thead>tr>th:nth-last-child(2){border-right: 0;}

.table1>thead>tr>th:first-child{border-left: 0;} 

.table1>tbody>tr>td:first-child{border-left: 0;} 

.table1>tbody>tr>td:last-child{border-right: 0;}  */

</style>

</head>

<body>

<table class="table1">

<thead>

<tr>

<th>213</th>

<th>123</th>

<th>123</th>

<!-- <th></th> -->

</tr>

</thead>

<tbody>

<tr>

<td>TD第一行</td>

<td>TD第一行第二列</td>

<td rowspan="16">TD第一行第3列</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

<tr>

<td>我是td啊啊啊</td>

<td>我是td啊啊啊</td>

</tr>

</tbody>

</table>

 

</body>

</html>

效果如下：

      问题1.滚动条在tbody外侧

              2.滚动时表格下方边框消失

 

将注释代码打开后效果，如下：



 chrome自定义滚动条：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.table1{

position:absolute; 

display: block; 

height: 48%;

  border-collapse:collapse; 

  padding-top: 52px; 

  font-size: 18px;

    border: 1px solid green;  

}

.table1>thead{position: absolute;top: 0;}

.table1>thead>tr>th{table-layout:fixed;}

.table1>tbody{display: block;height:100%;overflow-y: scroll;overflow-x: hidden;}

th, td{border: 1px solid green;width: 300px; height: 50px;text-align: center;}

 

.table1>thead>tr:first-child>th{border-top: 0;}

.table1>thead>tr>th:last-child{border-right: 0;}

/*.table1>thead>tr>th:last-child{border-right: 0;width: 15px; border-left: 0;}*/

/*.table1>thead>tr>th:nth-last-child(2){border-right: 0;}*/

/*去除双边框*/

.table1>thead>tr>th:first-child{border-left: 0;} 

.table1>tbody>tr>td:first-child{border-left: 0;} 

.table1>tbody>tr>td:last-child{border-right: 0;}  

/*chrome自定义滚动条--start*/

.my-scroll::-webkit-scrollbar {width:0.5rem;}

.my-scroll::-webkit-scrollbar-button{background-color: green; height: 1px; }

.my-scroll::-webkit-scrollbar-track{background: rgba(255,255,255,0.2); }

.my-scroll::-webkit-scrollbar-thumb{background:rgb(121, 120, 120); border-radius:10px;height: 20%; }

.my-scroll-null-th{width: 0.1rem;} 

/*chrome自定义滚动条--end*/

</style>

</head>

<body>

<table class="table1">

<thead>

<tr>

<th>213</th>

<th>123</th>

<th>123</th>

<!-- <th></th> -->

</tr>

</thead>

<tbody class="my-scroll">

<!-- tbody结构内容同上，复制即可 -->

</tbody>

</table>

 

</body>

 

</html>

效果如下：



滚动条样式修改只支持chrome，ie不支持，详细信息参考：

另：jQuery滚动条插件jquery.mCustomScrollbar各种样式的滚动条

 

  • 大小: 10.2 KB
  • 大小: 10.9 KB
  • 大小: 11.2 KB
分享到：
| css复合属性的写法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    table嵌套table边框样式

    在网页设计中，表格（Table）是用于组织数据的重要元素，而当表格嵌套时，如何设置合适的边框样式就显得尤为重要。`table嵌套table的边框样式`是一个常见的需求，尤其在处理复杂的数据展示时。本篇将详细介绍如何...

    vxe-table vue table 表格组件功能

    vxe-table是Vue.js中一款功能强大的表格组件，它为用户提供了丰富的表格操作功能，可以大大提高开发中的表格处理效率。vxe-table组件支持多种特性，包括但不限于基础展示、尺寸调整、样式定制、交互功能和数据处理等...

    Bootstrap Table两个table间行数据拖拽

    在“Bootstrap Table两个Table数据之间行数据拖拽”的主题中，我们主要讨论的是如何实现用户可以通过拖放操作在两个Bootstrap表格之间移动行数据，这种功能在数据管理、比较或重新排序场景中非常实用。 首先，我们...

    table转div工具

    "table转div工具"就是为了帮助开发者将原有的基于table的布局转换成更现代、更优化的div+CSS布局。 首先，我们需要理解table和div之间的主要差异。Table元素主要用于显示结构化数据，如表格或矩阵。它的布局是固定...

    pl-table示例代码

    `pl-table`是一个用于创建可定制化表格的前端组件，常在Web开发中用于数据展示。这个组件提供了丰富的功能和自定义选项，使得开发者能够轻松地构建交互式、响应式的表格。下面我们将深入探讨`pl-table`的相关知识点...

    selenium + python 获取table数据的示例讲解

    根据table的id属性和table中的某一个元素定位其在table中的位置 table包括表头，位置坐标都是从1开始算 tableId：table的id属性 queryContent：需要确定位置的内容 def get_table_content(tableId,queryContent): ...

    bootstrap-table-export.js和tableExport.js

    而“bootstrap-table-export.js”和“tableExport.js”是针对Bootstrap表格的导出插件，它们扩展了表格的功能，允许用户将表格数据导出为各种格式，如CSV、Excel、PDF等，便于数据分析和存储。 首先，我们来详细...

    vxe-table-v2.9.24_表格组件_Table_

    **vxe-table-v2.9.24：Vue.js中的高效表格组件** vxe-table是一款在Vue.js框架下设计的高性能表格组件，它的版本号为2.9.24，旨在提供一系列强大的功能来满足复杂的数据展示和操作需求。这款组件以易用性和灵活性为...

    uniapp-table中改版uni-table插件

    标题"uniapp-table中改版uni-table插件"表明我们正在讨论的是对`uni-table`组件的一个定制化改版。这个改版可能源于开发者对原组件功能的不足或者需要添加特定的交互效果。在这个过程中，开发者通常会深入理解组件的...

    bootstrap table ajax 示例

    Bootstrap Table 是一个流行的前端数据展示框架，它利用了Twitter Bootstrap 的样式和交互设计，使得创建交互式的、响应式的数据表格变得简单。在这个“bootstrap table ajax 示例”中，我们看到一个利用 Maven 构建...

    layui将table转化表单显示的方法(即table.render转为表单展示)

    table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表头 ]] }) 最简单直接用ajax请求，确保url路径正确 $.ajax({ dataType:'...

    bootstrap-table客户端分页实例

    Bootstrap Table是一种基于Bootstrap框架的开源JavaScript插件，用于创建功能丰富的、响应式的表格。这个"bootstrap-table客户端分页实例"是展示如何在不依赖服务器端处理的情况下，利用前端数据实现表格的分页功能...

    table2Excel.rar

    《Table2Excel.js在IE浏览器中的优化与应用》 在Web开发中，用户有时需要将网页上的表格数据导出为Excel文件，以便于保存、分析或共享。Table2Excel.js是一个常用的JavaScript库，它允许开发者将HTML表格转换为...

    基于Bootstrap table组件实现多层表头的实例代码

    Bootstrap Table多层表头实现实例代码 Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头...

    TableTree 表格树

    《TableTree：构建表格树形结构的实现与应用》 在数据展示中，有时我们需要将层级关系的数据以表格的形式呈现，这时，表格树形结构（TableTree）就显得尤为重要。它将传统二维表格与树状结构相结合，既保留了表格的...

    tableExport 前端数据导出工具

    **TableExport：前端数据导出神器** 在网页开发中，数据可视化是不可或缺的一部分，而将这些数据导出为可编辑或可打印的格式是用户常常需要的功能。这就是TableExport插件大显身手的地方。TableExport是一款强大的...

    bootstrapTable使用示例.rar

    BootstrapTable是一款基于Bootstrap框架的前端数据展示插件，它提供了丰富的功能和自定义选项，能够帮助开发者轻松地创建美观、响应式的表格。本示例压缩包包含了一系列关于BootstrapTable的使用示例，包括父子表、...

    bootstraptable冻结列例子.doc

    Bootstrap Table 是一个流行的开源前端组件库，用于创建交互式的、响应式的数据展示表格。在一些情况下，特别是数据列较多时，我们可能希望某些列始终保持在视口可见范围内，即使用户滚动表格，这些列也不会移动。这...

    FixedTable.7z

    table固定左侧多列，画面中可对多个table进行固定，谷歌、ie都试过没问题；之前实在是网上找不到好的，就自己整合弄了一个，质量没的说，肯定胜过90%其他的；调用简单： 例子是：html+jquery+FixedTable.js $("#...

    layui的table中显示图片方法

    图片需要用到模板.templet： ... var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,page:true ,cols:[[ {field:'needs_id',title:

Magicbox
Global site tag (gtag.js) - Google Analytics