CSS设置表格TD宽度布局

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

一、表格布局table-layout

  语法:
    table-layout : auto | fixed

  取值:

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

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

  **注意**

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

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

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

二、单元格文字控制

  1.white-space

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

    语法:

      white-space : normal | pre | nowrap | inherit
    取值:
      normal : 默认值;文本自动处理换行;假如抵达容器边界内容会转到下一行;

      pre      : 连续的空白符会被保留,在遇到换行符或者<br>元素时才会换行;

            换行和其他空白字符都将受到保护;
            这个值需要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的宽度(默认显示)

1 table{table-layout: fixed;}
2 <th style="width:63px" ></th>
3 td{white-space: normal;} 

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

table{table-layout: fixed;}
<th style="width:63px" ></th>
td{white-space: nowrap; overflow:hidden;word-break:break-all;} /*防止换行*/ 

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

  1.不转行

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

  2.强行换行

.text{word-break: normal;}

五、本文涉及链接

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break

时间: 2024-08-08 04:03:22

CSS设置表格TD宽度布局的相关文章

设置表格td宽度

CSS布局,表格宽度不听使唤的实例.想把表格第一例宽度设为20,其他自适应.但CSS中宽度是等宽的.只设这一行也不起作用.但是在实际应用中总是等宽处理,并不按照样式来走. XML/HTML代码 <table width="100%"> <tr> <td colspan="6" align="center"><strong>少 儿 瑜 伽 课 程 </strong></td>

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

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <table style="table-layout:fixed" id="table" data-toolbar="#toolbar" data-show-refresh="true" data-show-toggle="true" data-s

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

情况1:下面代码定义了表格宽带为为600px,未设置td宽带,3个td内容为1,2,3,可以看到3个内容平分table的宽度. 也就是每个td都是200px(请注意:如果用chrome调试宽度,会有一定的误差,因为600px还包括边框,因此实际宽度可能是198px,这里进行了简化,下同). <table style="width:600px; background-color:red" > <tr> <td>1</td> <td&g

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

表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识: 首先我们的首先表格中的标记,代码和运行效果如下所示: <span style="font-size:18px;"><html> <head> <title>年度收入</title> &l

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

css判断不同分辨率显示不同宽度布局实现自适应宽度

一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄).随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户),

css 固定HTML表格的宽度

http://www.cnblogs.com/sese/p/6118030.html *************************** 在网页中插件表格时,就算你有时定义了宽度,默认的也会根据里面内容的来自动拉伸.有时候自动拉伸是好,但是如果你表格里面的内容太长,表格就会拉伸的特别难看. 像下面的表格,正常的显示应该如下: 但是如果里面的数据太长的话,就会错位成下面这个样子: 我们如何保证抽奖时间固定宽度,让它显示一行,后面的奖品也显示一行,超出的部分用省略号表示呢? html部分代码如下

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑 收藏 一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固

firefox ie 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决

1. firefox ie 设置单元格宽度 td width 有bug,不能正常工作.以下方式可以解决 jqElement.css({ 'min-width': srcth1.width() + "px", 'width': srcth1.width() + "px" }); 2.不要使用CellSpacing  CellPadding,要不效果错误.