html网页设计表格,如何通过css让表格只有外边框,而没有内边框?或者只有内边框,而没有外边框？

html-css018

html网页设计表格,如何通过css让表格只有外边框,而没有内边框?或者只有内边框,而没有外边框？,第1张

table{\x0d\x0aborder:1px solid #000/*黑色1像素粗边框*/\x0d\x0a}\x0d\x0atd{\x0d\x0aborder:none/*这个是单元格，不给他要边框*/\x0d\x0a}\x0d\x0a以上是全局的，用了以后所有的表格都是这个样式。\x0d\x0a如果你要给特定的表格加入这个样式：\x0d\x0a1 给那个表格加上class='classname' （classname是你自己起的样式名）\x0d\x0a2 然后在CSS里加上\x0d\x0a.classname{\x0d\x0aborder:1px solid #000/*黑色1像素粗边框*/\x0d\x0a}\x0d\x0a.classname td{\x0d\x0aborder:none/*这个是单元格，不给他要边框*/\x0d\x0a}\x0d\x0a\x0d\x0a只有内边框没有外边框的话，我就只会用赖皮的方法：给table外面套一个overflow:hidden的div，宽度和高度比table小2px，给table加上margin-left:-1pxmargin-right:-1px这样把他的表格边框遮住。。

同理啊。

还是用border定义

如果页面中的所有表格都要定义的话，可以如下定义：

table {

border-top:1px solid #F00/*上部边框*/

border-bottom:1px solid #F00/*下部边框*/

border-left:1px solid #000/*左部边框*/

border-right:1px solid #000/*右部边框*/

}

如果只定义某个table，可以如下定义：

.colorfultable {

border-top:1px solid #F00/*上部边框*/

border-bottom:1px solid #F00/*下部边框*/

border-left:1px solid #000/*左部边框*/

border-right:1px solid #000/*右部边框*/

}

===============

如果页面中的所有表格内都要定义的话，可以如下定义：

table td {

border-top:1px solid #F00/*上部边框*/

border-bottom:1px solid #F00/*下部边框*/

border-left:1px solid #000/*左部边框*/

border-right:1px solid #000/*右部边框*/

}

如果只定义某个table，可以如下定义：

.colorfultable td {

border-top:1px solid #F00/*上部边框*/

border-bottom:1px solid #F00/*下部边框*/

border-left:1px solid #000/*左部边框*/

border-right:1px solid #000/*右部边框*/

}

<table border="0" cellspacing="0" cellpadding="0" class="colorfultable ">

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<style>标签中，输入css代码：td {padding: 0}。

3、浏览器运行index.html页面，此时成功用css去除了表格的边框和边距。