Question

CSS：关于table的边框问题求解

使用<table border="1">的话，会将表格整个包括其中的tr、td都加上边框
而使用CSS的border:#808080 solid 1px;却只会将table的最外层加上边框，这是为什么呢？如果想用CSS给table中的tr、td也都加上边框该怎么弄呢？

Answer 1

<table border="1"> 这种写法是table默认属性定义，非style样式定义，因此table中的自己元素都会继承样式。

如果是CSS中table{border:#808080 solid 1px;}就只对对table这个容器生效，不会作用于其子元素。

Answer 2

table{
border-spacing: 0;
border-collapse: collapse;
}
td{
border:1px solid #000;
}

追问

如果不设置border-collapse: collapse;呢？去掉后会发现tr、td有边框，但是table外部没有

追答

border-collapse:collapse;
是边框塌陷的意思（两个相邻TD的边框合并），去掉了也会有的啊，只是你会发现table最外层有一像素的变宽，而里面TD有2像素的边框。

Answer 3

table{border-collapse:collapse;font-size:12px;color:#666;background:#fff;}
table tr td{height:30px;line-height:30px;padding:0 10px;border:1px solid #ccc}
分别定义table和td样式即可。

追问

如果不设置border-collapse: collapse;呢？去掉后会发现tr、td有边框，但是table外部没有

追答

border-collapse:collapse;

是使table边框和里面的td边框重合，去掉的话，table与td之间会有间距，按上面定义，table当然就没边框了，如果需要有，去border-collapse:collapse;再给table定个border:1px solid #ccc;

追问

大哥，我的意思是table tr td{..}这里应该是table、tr、td都生效吧，为什么只有table下面的tr、td生效而还需要为table额外设置一回呢

追答

table tr td 这样式就只是定义td这个标签的，

你说的都生效应该为table,tr,td
再不采纳，我明天再来回答。