在手机竖屏和PAD端表格显示的自适应处理，摘自《高性能HTML5》
复制粘贴就可以看效果哦。d
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.table ul,.table li{
padding:0;
margin:0;
list-style:none;
}
.table{
display:table;
}
.tr{
display:table-row;
}
.td{
display:table-cell;
}
.table,.tr,.td{
border:1px solid #ccc;
border-collapse:collapse;
}
.tableTreatment1{
width:800px;
-webkit-box-shadow:2px 2px 2px #999999;
-moz-box-shadow:2px 2px 2px #999999;
box-shadow:2px 2px 2px #999999;
}
.tableTreatment1 .first{
background:#c8dfff;
font-weight:bold;
}
.tableTreatment2{
width:320px;
}
.tableTreatment2 .table,.tableTreatment2 .tr,.tableTreatment2 .td{
border:none;
}
.tableTreatment2 .tableHead{
display:none;
}
.tableTreatment2 .tr{
width:200px;
}
.tableTreatment2 .td{
display:block;
float:none;
padding:5px;
}
.tableTreatment2 .td:first-child{
color:white;
font-weight:bold;
text-shadow:0 0 3px #333;
background:#aebcbf;
}
.tableTreatment2 .td:before{
content:attr(data-colhead)":";
font-weight:bold;
color:#777;
}
.tableTreatment2 .td:first-child:before{
content:"";
}
@media only screen and (max-width:767px){
.tableTreatment1{
width:320px;
}
.tableTreatment1 .table,.tableTreatment1 .tr,.tableTreatment1 .td{
border:none;
}
.tableTreatment1 .tableHead{
display:none;
}
.tableTreatment1 .tr{
width:200px;
}
.tableTreatment1 .td{
display:block;
float:none;
padding:5px;
}
.tableTreatment1 .td:first-child{
color:white;
font-weight:bold;
text-shadow:0 0 3px #333;
background:#aebcbf;
}
.tableTreatment1 .td:before{
content:attr(data-colhead) ": ";
font-weight:bold;
color:#777;
}
.tableTreatment1 .td:first-child:before{
content:"";
}
}
</style>
</head>
<body>
<div class="table tableTreatment1">
<ul class="tr tableHead">
<li class="td" data-colhead=""></li>
<li class="td" data-colhead="The Head">
The head
</li>
<li class="td" data-colhead="B">
B
</li>
<li class="td" data-colhead="C">
C
</li>
<li class="td" data-colhead="D">
D
</li>
<li class="td" data-colhead="E">
E
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
0000
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
111111
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
<ul class="tr tableBody">
<li class="td first" data-colhead="">
22222
</li>
<li class="td" data-colhead="The Head">
The head a
</li>
<li class="td" data-colhead="B">
BBBBBBB
</li>
<li class="td" data-colhead="C">
CCCCCCC
</li>
<li class="td" data-colhead="D">
DDDDDDD
</li>
<li class="td" data-colhead="E">
EEEEEEE
</li>
</ul>
</div>
</body>
</html>
相关推荐
在这个"自适应Table表格样式代码.zip"压缩包中，我们主要关注的是如何使用HTML和CSS3来创建一个响应式的表格，以实现跨平台的良好用户体验。此外，JavaScript也可能被用来增强表格的功能，如交互性或动态调整。 ...
`"ios-自适应Table View Cells.zip"`这个压缩包中包含的资源可能是关于如何在Objective-C中实现Swift中的自适应TableView Cell的文章或者代码示例。在iOS开发中，自适应（Autolayout）是实现界面动态调整的关键技术...
基于uniapp封装的table组件，表格宽度自适应，高度自适应，表头以及内容只传数值即可
为了解决这一问题，"自适应Table表格样式特效代码"应运而生。这种特效代码利用了CSS3的先进技术，使得表格在不同屏幕尺寸下都能保持良好的可读性和视觉效果，从而提高用户在手机、平板电脑和桌面电脑等多平台的浏览...
本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制，以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下，列宽...
自适应Table表格样式代码是为了确保无论用户使用何种设备浏览网页，表格都能保持清晰、易读且布局合理的状态。本文将详细讲解如何实现这样的效果，并介绍相关的关键技术和实践方法。 首先，我们需要理解表格的基本...
SWT表格管理类，包括表头排序事件，table宽度自适应事件，隔行颜色事件
basictable插件是一款jQuery自适应浏览器宽度响应式表格插件，可以设置breakpoint来定制自己的响应式断点，该表格能适应台式电脑，平板和手机的需求，响应式效果非常好，现在网站很多都有多平台版本了，这个效果非常...
鄙人在写一个项目，发现成功将数据在页面显示后， 高度没有自适应，而是将一些按钮遮挡了，不断的调试和网上寻找解决办法，发现没有效果，最后添加了一句css <style> .layui-table-cell{ display:table-...
在创建自适应表格时，我们通常会结合使用`<table>`元素、`.table`类和Bootstrap的栅格系统。例如，我们可以将表格内容包裹在`.row`类的容器中，并将每个表格单元格分配到相应的`.col-*`类，这样在不同设备上，表格...
在网页设计中，图文混排是一项常见的任务，尤其是在新闻、博客...总之，通过这样的CSS+Table方法，我们可以轻松实现图文混排中的文本自适应图片宽度，而且无需担心浏览器兼容性问题，让网页设计变得更加高效和美观。
本示例涉及的是如何将ECharts的柱状图与HTML表格（table）进行拼接，同时解决每列对齐以及页面自适应的问题。以下是对这个主题的详细讲解： 首先，我们来讨论ECharts柱状图的创建。ECharts提供了一个直观且灵活的...
为了实现自适应高度，你需要在el-table元素上定义height属性。例如： ```html <el-table :data="tableData" height="250" border style="width:100%"> <!-- 列定义 --> </el-table> ``` 在这个例子中，`...
<table class="table table-bordered table-hover"> 姓名 性别 年龄 电话 操作 <td colspan="5" class="danger"><button class="btn btn-primary btn-sm">增加</button></td> </table> 一款...
然而，当我们需要显示的内容长度不固定时，比如文章摘要、评论或者多行文本，这时`UITableViewCell`的高度自适应就显得尤为重要。本文将深入探讨`UITableView`中`UITableViewCell`高度自适应的实现方法。 首先，...
标题中的“精简强大的自适应TAB选项卡！”指的是在网页设计中使用的一种高效且灵活的用户界面元素，即Tab选项卡。这种设计模式允许在有限的空间内组织大量内容，通过切换不同的Tab，用户可以轻松访问和浏览不同部分...
【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮个数自适应, 方法封装全局使用demo, 开箱即用 【vue+el-table】表格操作列宽度跟随按钮...
在这个"jqGrid的自适应表格"示例中，我们将探讨如何利用jqGrid实现表格的自适应窗口大小，以及在单元格数据过多时如何优雅地处理显示。 首先，要创建一个基本的jqGrid，你需要在HTML文件中引入jQuery库和jqGrid的...
标签中的“自适应”意味着最后一列的宽度会根据表格的总宽度自动调整。这通常通过JavaScript实现，计算所有可调整列的新总宽度后，用表格的总宽度减去这个值，剩下的宽度分配给最后一列。这样可以确保表格填满其容器...