CSS表格


表格边框

如需在 CSS 中设置表格边框,请使用 border 属性。

table, th, td

{

border: 1px solid blue;

}

折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框:

table

{

border-collapse:collapse;

}

table,th, td

{

border: 1px solid black;

}

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%,同时将 th 元素的高度设置为 50px:

table

{

width:100%;

}

th

{

height:50px;

}

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:

td

{

text-align:right;

}

vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:

td

{

height:50px;

vertical-align:bottom;

}

表格内边距

如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:

td

{

padding:15px;

}

表格颜色

下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色:

table, td, th

{

border:1px solid green;

}

th

{

background-color:green;

color:white;

}

border-collapse

设置是否把表格边框合并为单一的边框。

border-spacing

设置分隔单元格边框的距离。

caption-side

设置表格标题的位置。

empty-cells

设置是否显示表格中的空单元格。

table-layout

设置显示单元、行和列的算法。

07CSS表格的更多相关文章

  1. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. jQuery学习之路(6)- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  4. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  5. DOM的小练习,两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. jquery-treegrid树状表格的使用(.Net平台)

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  8. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  9. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

随机推荐

  1. Spring 各种注解(@)的含义与认识

    依赖注入,从字面上理解,即是:以注入的方式实现依赖: Spring 容器负责创建应用程序中的 bean,并通过 DI(依赖注入)来协调这些对象之间的关系.当描述 bean 如何进行装配(autowir ...

  2. AutoIT: WinGetText的作用

    WinGetText是一个非常有用的函数,可以获取页面上一切可见的资源,这为自动化测试的验证功能提供了保证.可以使用一些字符串处理函数来对获取来的页面文本进行分析. If StringInStr(Wi ...

  3. 使用Visual Studio 利用WinGDB编译和远程调试嵌入式Linux的程序

    写这篇文章的目的在于帮助那些既要使用Visual Studio编写程序又要开发和调试嵌入式Linux 程序的苦命程序员们! 第一步, 安装 WinGDB ,下载位置  http://www.wingd ...

  4. Java Socket实战之四:传输压缩对象

    转自:http://developer.51cto.com/art/201202/317546.htm 上一篇文章说到了用Java Socket来传输对象,但是在有些情况下比如网络环境不好或者对象比较 ...

  5. ThinkPHP3.2.3学习笔记3---视图

    一.说明 每个模块的模板文件是独立的,为了对模板文件更加有效的管理,ThinkPHP对模板文件进行目录划分,默认的模板文件定义规则是:视图目录/[模板主题/]控制器名/操作名+模板后缀 默认的视图目录 ...

  6. bzoj 1680: [Usaco2005 Mar]Yogurt factory【贪心】

    贪心,一边读入一边更新mn,用mn更新答案,mn每次加s #include<iostream> #include<cstdio> using namespace std; in ...

  7. Phoenix数据覆盖的一种解决方案

    最近在做实时数仓,需要兼顾离线和实时两种查询方式,大致的方案是数据通过binlog抽取,经Phoenix插入,hive映射hbase表:Phoenix创建索引,实时查询Phoenix:离线查询hive ...

  8. java-通过反射获取目标类的属性,方法,构造器

    首先定义一个urse package com.studay_fanshe; public class User { private String uname; private int age; pri ...

  9. float(double)快速转换int的方法

    自己写一个软件渲染器的时候,无意中发现float转换int非常耗时,于是查阅文章,这才有了这个命题,以前不清楚还有这么个机制.网上看了很多文章,搜索到了一个数字6755399441055744,这个是 ...

  10. postgreSQL 创建user表时引发的表名大写与双引号问题

    在postgreSQL里面,user是一个保留字. 如果你想创建user表,你可能会遭遇一些问题! 如图: 可以看到,这里是无法创建user表的. 你可能会说,我只是没有加双引号"" ...