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

css-table 布局

阅读更多

<table width="600px" align="center" border="0" cellspacing="0" cellpadding="0" >

<tr><td></td></tr>

</table>

 

等价地,用css

<table class="table-1">

<tr>

    <td></td>

</tr>

</table>

 

其中,css定义如下

.table-1{

    width:600px;

    border-collapse:collapse;

    margin:auto;

}

 

另外,table的其他css定义如下:

 

 

border-collapse

语法:
border-collapse : separate | collapse
 
参数:
 
separate :  边框独立(标准HTML)
rtl :  相邻边被合并

 


 

border-spacing


 
语法:
 
border-spacing : length || length
 
参数:
 
length :  由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位
 
 
示例:
 
table { border-collapse: separate; border-spacing: 10px; }

 

 

caption-side


 
语法:
 
caption-side : bottom | left |right | top
 
参数:
 
bottom :  下面
left :  左边
right :  右边
top :  下面
 
示例:
 
table caption { caption-side: top; width: auto; text-align: left; }

 

 

empty-cells


 
语法:
 
empty-cells : hide | show
 
参数:
 
hide :  隐藏
show :  显示
 
示例:
 
table { caption-side: top; width: auto; border-collapse: separate; empty-cells: hide; }

 

 

 

table-layout


 
语法:
 
table-layout : auto | fixed
 
参数:
 
auto :  默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed :  固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关  
 
示例:
 
table { table-layout: auto; }

 

 

speak-header


 
语法:
 
speak-header : once | always
 
参数:
 
once :  所有的单元格只有一个表格头
fixed :  每一组单元格对应一个表头
 
示例:
 
table { speak-header: once }

分享到:
评论

相关推荐

    pl-table示例代码

    `pl-table`通常会配合CSS框架(如Bootstrap)进行样式定制,以适应不同的布局需求。同时,它也支持响应式设计,确保在不同设备上都能良好显示。 ### 7. `Test`页面示例 在`Test`页面中,我们可以看到一个完整的`pl...

    bootstrap-table-fixed-columns.zip

    `bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离,并在需要时添加额外的样式和布局,确保表头在滚动时始终保持可见。在实际应用中...

    bootstrap-table实现 行拖拽 插件jquery.tablednd.js bootstrap-table-reorder-rows.js

    bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    文件 `bootstrap-table-fixed-columns.css` 是CSS样式表,用于定义插件的样式规则,确保修复后的功能在视觉上与原版Bootstrap Table兼容且美观。`bootstrap-table-fixed-columns.js` 是JavaScript文件,包含了修复和...

    bootstrap-table插件包

    5. **响应式设计**:Bootstrap Table的响应式设计使得表格在不同分辨率和设备上都能自动调整布局,保持良好的可读性和可用性。这对于现代Web应用来说至关重要,因为用户可能使用桌面、平板或手机访问网站。 6. **...

    bootstrap-table.js

    `bootstrap-table.css` 是样式表文件,负责定义Bootstrap Table的外观和布局。它继承了Bootstrap的样式,同时扩展了一些特定于表格的样式规则,如单元格的对齐方式、边框样式、颜色以及响应式设计等。通过自定义这个...

    table2css-3.10.3

    总的来说,"table2css-3.10.3"是一个实用的工具,能够帮助开发者将过时的表格布局升级为现代的CSS布局,提升网页设计的质量和响应性。通过充分利用其功能,用户可以在不牺牲内容可读性的情况下,使网站更加符合当代...

    CSS样式Table[6] - style-table

    在这个主题"CSS样式Table[6] - style-table"中,我们将深入探讨如何使用CSS来美化和控制表格的样式。 表格在数据展示和组织信息时非常有用,但默认的HTML表格样式通常较为朴素。CSS提供了丰富的选择器和属性,让...

    table布局网页转换为div+CSS布局的转换软件

    在描述中提到的“table布局网页转换为div+CSS布局的转换软件”能够快速高效地完成这一转变,无论是对于简化网页代码,还是提升网页性能,都有显著效果。 软件支持绝对定位和流定位,这意味着它可以处理复杂的布局...

    react-css-grid-table:使用CSS网格布局的React表库

    react-css-grid-table 这是一个使用的React表库。 安装 yarn add https://github.com/RebeccaPark/react-css-grid-table JSBin示例 看。 Webpack风格的示例 import Table , { IconColumn } from 'react-css-grid-...

    layui-高级表格-soul-table功能-HTML源码

    在使用layui-soul-table时,你需要引入layui的CSS和JS文件,以及soul-table的特定文件。在HTML代码中,定义表格结构,并通过JavaScript进行初始化和配置。例如: ```html &lt;!DOCTYPE html&gt; ...

    Bootstrap Table Fixed Columns 固定列

    3. Bootstrap Table的CSS和JS:这是Bootstrap Table的核心库,提供表格的各种功能。 4. Fixed Columns的CSS和JS:这是扩展包,专门用于实现固定列功能。 在HTML中,你需要创建一个基本的Bootstrap表格结构,并且...

    CSS样式Table[1] - css3-table-price-hosting1

    1. **CSS3表格布局**:在CSS3之前,表格布局相对固定,但CSS3允许我们使用`display`属性调整表格元素的行为。例如,`display: table`、`display: table-row`、`display: table-cell`等可以让我们模仿HTML表格的行为...

    BOOTSTRAP-TABLE源码

    BOOTSTRAP-TABLE会利用HTML表格元素(`&lt;table&gt;`)结合Bootstrap的CSS类来生成基本的表格布局。 2. **JavaScript/jQuery**:为了实现交互功能,BOOTSTRAP-TABLE依赖于jQuery库。jQuery简化了DOM操作,事件处理和动画...

    bootstrap-table-master.rar

    首先,Bootstrap Table提供了多种预定义的样式,使得表格在不同设备上都能保持良好的显示效果,尤其在移动设备上,其响应式设计能够自动调整表格布局。这使得开发者无需花费大量时间在样式调整上,可以更专注于业务...

    分栏布局--两栏

    本主题将深入探讨三种主要的分栏布局模式:CSS-table布局、浮动布局和定位布局。 首先,我们来看CSS-table布局。这种布局方式利用CSS的`display`属性设置为`table`、`table-cell`等值,模拟表格的行为来实现分栏。...

    bootstrap-table 表内行拖放所需js/css及实例

    1. Bootstrap CSS:这是Bootstrap框架的基础,提供了样式和布局的支持。 2. Bootstrap JS:包含了Bootstrap的一些交互组件,如模态框、下拉菜单等。 3. Bootstrap Table CSS和JS:这是Bootstrap Table的核心,提供了...

    bootstrap-table头部错位已完美解决

    在Bootstrap框架中,表格是通过CSS浮动布局来实现的,如果在响应式设计中没有正确处理,尤其是在不同的屏幕尺寸下,就可能出现头部错位的情况。另外,当表格内容过多,导致需要滚动查看时,如果表格的固定列(fixed-...

    bootstrap-table插件

    考虑到现代Web的移动优先策略,Bootstrap Table内置了响应式布局,可以自动适应不同屏幕尺寸,保证在手机和平板设备上的良好显示。 8. **社区支持** Bootstrap Table有一个活跃的社区,提供详细的文档、示例代码...

    bootstrap-table-fixed-columns.js

    在网页设计中,Bootstrap框架提供了优雅的HTML和CSS设计模板,使得页面布局和样式调整变得简单易行。而`bootstrap-table-fixed-columns.js`是这个库的一个扩展插件,主要功能是实现表格列的固定,即使在滚动时,也能...

Global site tag (gtag.js) - Google Analytics