`
zhangyaochun
  • 浏览: 2608736 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css之table-layout

 
阅读更多

CSS table-layout 属性

-----------------用来显示表格单位格、行、列的算法规则。

 

  • 固定表格布局:
---------相比自动表格布局,允许浏览器更快地对表格进行布局。
---------水平布局仅取决于表格宽度、列宽度、表格边框宽度、单位格间距,而与单元格内容无关。           
  • 自动表格布局:
---------列的宽度是由列单元格中没有折行的最宽的内容设定的。
---------算法比较慢。需要在确定最终的布局之前访问表格中所有的内容。

默认值: 继承性: 版本: JavaScript 语法:
auto
yes
CSS2
object.style.tableLayout="fixed"


浏览器支持

所有浏览器都支持 table-layout 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

 

可能的值

值 描述
automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。

分享到:
评论

相关推荐

    表格设置table-layout:fixed后对单元格宽度设置无效

    在实施解决方案时,还需注意一些细节问题,例如确保CSS中table-layout属性设置为fixed,并且表格宽度也被适当地指定,以便于固定布局的生效。同时,当使用col标签指定宽度时,也需要在相应的col标签中明确指定width...

    详解CSS的table-layout属性的用法

    今天来和大家详细说一下table-layout属性的用法。 /*eg:设置表格布局算法*/ table{ table-layout:fixed; } ***本文关键词:table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法  ...

    固定 table宽度 table-layout: fixed

    "固定table宽度 table-layout: fixed" 是一个CSS属性,用于解决这个问题,确保表格在不同场景下保持一致的列宽。 首先,让我们了解一下表格布局的默认模式——"auto"布局。在默认情况下,表格的列宽会根据其内容的...

    利用层的table-row、table-cell属性进行页面布局

    "利用层的table-row、table-cell属性进行页面布局"是一种常见的CSS布局技术,尤其在早期的Web开发中广泛使用,尽管现代CSS布局如Flexbox和Grid已变得更为流行。这种布局方法模仿了HTML表格的行(row)和单元格(cell)...

    css table-layout属性显示表格单元格、行、列的算法规则

    总结来说,`table-layout`属性是CSS中一个重要的优化工具,尤其对于包含大量数据或需要快速呈现的表格。通过明智地使用`fixed`布局,开发者可以提高表格的加载速度,同时保持良好的可读性和用户体验。然而,需要注意...

    Table Layout in CSS epub

    Table Layout in CSS 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有侵权,请联系上传者或csdn删除

    如何通过CSS样式设置单元格显示内容的长度.doc

    本文将详细介绍如何通过CSS样式实现这一功能,同时结合`table-layout`属性来优化表格的布局性能。 首先,`table-layout`属性是CSS中用于设定表格布局算法的关键。默认情况下,表格布局(`table-layout: auto`)会根据...

    CSS样式Table[2] - CSS3Tables

    - `table-layout`属性控制表格的布局算法。`fixed`值可使表格宽度固定,所有列宽会根据第一行的列宽自动调整;而`auto`则是默认值,列宽根据内容自适应。 2. **边框合并** - `border-collapse`属性决定表格单元格...

    css-cheat-sheet-v2.pdf

    - **`table-layout`**:设置表格布局算法。 - **`border-collapse`**:设置边框合并。 - **`border-spacing`**:设置单元格边距。 - **`empty-cells`**:设置空单元格的显示方式。 - **`speak-header`**:控制表格...

    CSS-Layout-Notes

    4. **网格布局(Grid Layout)**:CSS Grid是现代布局系统,可以二维地定义行和列,轻松实现复杂的网格布局。它提供了一种高效的方式来组织和对齐内容,尤其适用于杂志样式、电子商务网站等。 5. **Flexbox布局**:...

    表格自动换行主义CSS属性

    通过以上对CSS属性的详细解析及应用实例的介绍,我们可以看出,合理利用`table-layout`、`word-break`和`word-wrap`等CSS属性,能够有效改善表格内文本的显示效果,尤其是在需要处理大量文本数据的情况下,自动换行...

    bootstrap表格内容过长时用省略号表示的解决方法

    1. 在表格的CSS中设置 `table-layout: fixed;`,确保列宽不随内容自动变化。 2. 为表格单元格(td)设置 `overflow: hidden;`,隐藏超出的内容。 3. 使用 `text-overflow: ellipsis;` 添加省略号,表示内容被截断。 ...

    css之自动换行.pdf

    对于`table`元素,IE浏览器可以使用`table-layout: fixed;`配合`word-break`或`word-wrap`来控制内容换行和隐藏多余内容。例如: ```html <table style="table-layout:fixed" width="200"> <td>...

    css-layout-positioning-08:CSS 定位

    早在 90 年代,布局是使用表格 ( <table> ) 完成的,表格具有行 ( <tr> ) 和行细分 ( <td> )。 然而,由于几个原因,这是有问题的。 布局被硬编码到页面中 - 无法轻松调整。 作为 (1) 的结果,在多个页面之间保持...

    css-layout1

    5. **表格布局(Table Layout)**:虽然HTML本身就提供了`<table>`元素进行表格布局,但在CSS中也可以通过模拟表格的行为来实现类似的布局。 在HTML方面,了解并正确使用各种标签是创建有效布局的基础。例如: - `...

Global site tag (gtag.js) - Google Analytics