table表格边框的设置

border-collapse 属性设置table的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。

border-collapse值

separate: 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse : 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit    : 规定应该从父元素继承 border-collapse 属性的值。

对应的JS脚本属性为:borderCollapse

border-collapse实例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table
  {}{
  border-collapse:collapse;
  }

table, td, th
  {}{
  border:1px solid black;
  }
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
<p><b>注释:</b>如果没有规定 !DOCTYPE,border-collapse 属性可能会引起意想不到的错误。</p>
</body>
</html>

参考资料:使用border-collapse设置table边框  http://www.studyofnet.com/news/942.html

时间: 2024-08-06 01:55:15

table表格边框的设置的相关文章

[转]CSS如何设置html table表格边框样式

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

HTML表格边框的设置小技巧

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解.

html 表格边框的设置

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: ID NAME GENDER 1001 mike male 可以发现表格的边框好像很宽,当然这里的"很宽"绝对不是表格border的宽,大家看到的宽应该是<td>之间有间隙所致.因此只需要修改表格的cellspaci

(转)HTML表格边框的设置小技巧

对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下: ID NAME GENDER 1001 mike male 可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格bor

CSS 设置TABLE 表格 边框

/*table列表 合并边框设置*/ .tablelist { border-collapse:collapse; } /*table列表 设置边框宽度及颜色*/ .tablelist td { border:1px solid blue; }

table表格边框样式

table{border-collapse:collapse; border-spacing:0; border-left:1px solid #aaa; border-top:1px solid #aaa; } td{border-right:1px solid #aaa; border-bottom:1px solid #aaa; padding:3px 15px; text-align:left; color:#3C3C3C;} 更多参考:http://www.cnblogs.com/pr

css如何让表格table的边框为1像素呢

在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为1像素呢? 其实很简单,给table使用css样式 border-collapse: collapse; 这个样式的意思就是“为表格设置合并边框模型” 这个属性经测试,支持一下浏览器:        下面我写一个案例 CSS /*重点就是要在table上加border-collapse: colla

【table】给table表格设置一个通用的css3样式(默认有斑马条纹)

/* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data-table table { width: 100%; border-collapse: collapse; //设置表格边框合并为单一边框 } .data-table caption { height: 30px; line-height: 30px; font-weight: 700; } .d

css中的border-collapse属性如何设置表格边框线?(代码示例)

css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css border-collapse属性是什么?它的作用. border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示. border-collapse 属