css td 比例,CSS设置表格TD宽度布局

使用表格布局时，对单元格的宽度控制很伤脑筋，所以查阅资料整理如下：

一、表格布局table-layout

语法：

table-layout : auto | fixed

取值：

auto  : 大多数浏览器采用自动表格布局算法对表格布局；表格及单元格的宽度取决于其包含的内容。

fixed ：表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定；在当前列中，该单元格所在行之后的行并不会影响整个列宽。

**注意**

使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。

这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。

任何一个包含溢出内容的单元格可以使用 overflow  属性控制是否允许内容溢出。

二、单元格文字控制

1.white-space

该属性是用来设置如何处理元素中的空白

语法：

white-space : normal | pre | nowrap | inherit

取值：

normal : 默认值；文本自动处理换行；假如抵达容器边界内容会转到下一行；

pre      : 连续的空白符会被保留，在遇到换行符或者
元素时才会换行；

换行和其他空白字符都将受到保护；

这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持；

如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用；结果等同于 normal ；

nowrap : 连续的空白符会被合并，强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象；

2.word-break

该属性指定了怎样在单词内断行

语法：

word-break : normal | break-all | keep-all

取值：

normal   : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行 ；

break-all: 对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行 ；

keep-all : CJK 文本不断行；

Non-CJK 文本表现同 normal(与所有非亚洲语言的normal相同；对于中文，韩文，日文，不允许字断开；

适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法)；

三、表格宽度综合处理

1.css固定table td的宽度(默认显示)

table{table-layout: fixed;}

td{white-space: normal;}

2.css固定table td的宽度(一行显示)

table{table-layout: fixed;}

td{white-space: nowrap; overflow:hidden;word-break:break-all;} /*防止换行*/

四、CSS设置文本强制换行和不换行写法(题外)

1.不转行

.text{overflow:hidden;white-space：normal;}

2.强行换行

.text{word-break: normal;}

五、本文涉及链接

设置表格td宽度

CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 & ...

如何通过css设置表格居中

CSS控制整个表格居中,不只是让表格里的文字居中,是整个表格居中1. 不用table的Align="center",要用CSS实现2. 不加

CSS设置超出指定宽度自动换行

一.背景 最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不 ...

设置表格td超出内容后截取并以...显示

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

左

layui静态表格固定td宽度,table固定td宽度

正在做一个项目,要求数据表的列是不固定的,有可能是有10列,有可能是20列,第一列宽度要固定,然后我怎么设置都没有用, 这个问题困扰了我三天,后来终于百度到了, 这个博客: https://www.c ...

CSS+DIV网页样式与布局：第二章：CSS的基本语法

第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

table表格宽带研究(附带：table表格为什么设置td宽度无效)

情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一 ...

精通CSS+DIV网页样式与布局--设置表单和表格

表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

随机推荐

python类型转换

1.数字转字符串 str(42) == "42" 2.字符串转数字 int("42") == 42 3.字符转ascii码 ord("a") ...

SQL2014 error 40 ( Microsoft SQL Server, 错误2)

可能是安装了SQL EXPRESS版 尝试使用(local)\SQLEXPRESS 作为服务器名称登陆. 用 计算机名\实例名  作为用户名登录.

Ftrl in tensorflow

reference :点击这里https://github.com/tensorflow/tensorflow/issues/3725 讲解 http://www.tuicool.com/articl ...

Ext.Net常用方法

1.js(Ext)操作 Ext.Msg.alert('系统提示', '未连接血站,该功能暂时不能使用.'); Ext.getCmp("id").getValue();Ext.get ...

CSS 定义上划线、下划线、删除线代码