css3 td 不自适应

2024-11-02

【css】table标签内的td、th如何设置固定宽度，而不是自适应？

table{ min-width: %; } td{ min-width: 100px; } .table-container{ overflow:auto; display: block; } <div class="table-container"> <table> <tr> <td></td> <td></td> <td></td> <td></td>

固定表头，单元格td宽度自适应，多内容出现-横向纵向滚动条数据表格的<前世今生>

固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则table是当仁不让的首选,一般的数据,普通的table即可满足需求:涉及到,数据过多时候,要左右可以滚动查看数据,且头部要锁定.则需要深入开发一下了! A:单一table来实现需求 html结构如下 <table class="form-table">

css3 rem手机自适应框架

css3 rem手机自适应框架 rem是按照html的字体大小来所以不同宽度浏览器 htmlfont-size不一样就可以做到自适应了此方法比百分比方便<pre><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

前面的话一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸.CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'.除此之外 ,还新增了更细粒度的'min-content'和'max-content'.这四个关键字可用于设置宽高属性.本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀 fill-available width:fill-available表示撑满可用空间举例来说,页面中一

css3 flex流动自适应响应式布局样式类

1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联网上关于flex流动布局的文章很少,搜索关于flex的文章,大部分还介绍的是旧的知识点,显然已经不符合当前的w3c标准了,要想了解flex的相关内容,可以参考http://qianduanblog.com/2549.html.并且,支持flex的浏览器也很少,只有谷歌浏览器完全支持,其他低版本的we

CSS3 background-size图片自适应

转自:http://www.html5cn.com.cn/css3/2013-04-21/267.html: background-size属性和background-origin属性.background-clip属性一样,也是CSS3对于background新增加的属性.它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用backgro

CSS3 background-size图片自适应

http://www.html5cn.com.cn/css3/2013-04-21/267.html background-size属性和background-origin属性.background-clip属性一样,也是CSS3对于background新增加的属性.它的作用是指定背景图片的大小,比如:对于一个div块,我们需要为它添加一张图片作为背景,然而图片大小并非总能尽如人意,但我们又不想使用background-repeat属性让背景平铺,那么这时我们就可以使用background-

td宽度自适应窄的地方自动收缩

.layui-table td,.layui-table th { white-space: nowrap; width: auto; min-width: 0px!important; } 不换行! 我曹,无情! <td style="white-space: normal;">{$vo.scope}</td> 宽度固定,自定换行!

css3让元素自适应高度

知识点: viewport:可视窗口,也就是浏览器.vw Viewport宽度, 1vw 等于viewport宽度的1%vh Viewport高度, 1vh 等于viewport高的的1% calc()使用通用的数学运算规则,但是也提供更智能的功能: 1.使用“+”.“-”.“*” 和 “/”四则运算:2.可以使用百分比.px.em.rem等单位:3.可以混合使用各种单位进行计算:4.表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有

CSS3伸缩盒Flexible Box

这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的时候为了适配,如果用百分比,就得精确计算,而且如果有1px边框,计算会更加复杂难控制 2)如果有多列,要让所有列的高度一样,以前的话需要用各种计算或用子元素撑高等 3)上下居中,如果是在以前,那么用line-height或top绝对定位等计算 4)表单布局的时候,经常是左边和右边在一行上,以往是设置

CSS3多媒体查询

CSS2多媒体查询: @media规则在css2中有介绍,针对不同媒体类型(包括显示器,便携设备,电视机,等等)可以定制不同的样式规则. CSS3多媒体查询: CSS3多媒体查询继承了CSS2多媒体类型的所有思想,取代了查找设备的类型,CSS3根据设置自适应显示. 多媒体查询可以检查很多事情: viewport(视图)的宽和高,设备的宽和高,朝向,分辨率. 查询语法: @media not|only|all mediatype and (expressions){ css-sode; }

CSS3 教程

CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! 更多:http://www.runoob.com/css3/css3-tutorial.html --------------- 以下为部分摘抄 CSS3 模块 CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面更多

table中的td自动换行

总有那么几个时候会觉得,table的td不能自适应换行真坑,凭什么只能用tr来换行,经常数据都是连在一起的呀,你叫我怎么把它拆分放到tr里...... 那能不能用ul和li来替换?可以是可以,不过有时遇到“牛逼”的领导你能怎么办,就要用table怎么办!就问你怎么办!!! 那就把tr当ul,td当li用咯! 1.效果图: 2.这是重置样式normalize.css代码: /** * Correct `block` display not defined in IE 8/9. * * 修正IE 8

使用CSS3实现表格隔行/隔列变色

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>Css3实现表格隔行变色或隔列变色</title> <style> body{padding:0;margin:0;font:normal 12px/24px "\5FAE\8F6F\96C5\9ED1";color:#444;} table{width:500

Bootstrap速学教程之简要介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,不用请UI设计师也能开发出中规中矩的网页,并且最重要的是支持html5.css3移动端自适应,现在很多所谓的三合一五合一网站是基于bootstrap搭建的. 我们来看一个简单的例子 <!DOCTYPE html> <html lang="zh-CN"

css布局篇

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="v.js"></script></head><style> *{ margin: 0;padding:0; list-style: n

2016 Technology

rem 62.5%在chrome谷歌和其他浏览器不一样 http://www.5imoban.net/jiaocheng/div+css/201512191529.html http://blog.csdn.net/phunxm/article/details/42174937/ 淘宝弹性布局方案lib-flexible实践 http://www.cnblogs.com/lyzg/p/5058356.html 手机淘宝的flexible设计与实现 http://www.html-js.com/a

JD_M案例知识点（移动端）

# JD_M案例知识点基础布局+顶部通栏+顶部轮播图+导航栏知识点 base.css ::before,::after 伪元素统一设置文字 sans-serif 移动端的默认字体 font-family: '微软雅黑',sans-serif; 设置背景图片的大小压缩了一倍目的是为了防止用户看到像素颗粒,如果要一行写完background,size要加"/" 轮播图--左右两张的无限轮播图最左边加上最后一张最右边加上第一张图默认给用户看的是:如果用索引来说,是索引为1的那

Bootstrap 响应式表格

响应式表格通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

Bootstrap 表格2

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表格2</title> <meta charset="utf-8" /> <meta name="viewport&

CSS基础面试题，快来查漏补缺

本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作为一个面试资料,但感觉也能帮助前端新手梳理CSS的知识点. 开胃餐-两道常见考题盒子模型样式与选择器 CSS3 包含块 BFC 中插小点定位position display与visibility float flexbox overflow 响应式设计 CSS优化应用开胃餐x2 用纯CSS

css3 td 不自适应

热门专题