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

html-css06

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这样把他的表格边框遮住。。

1、我们首先展示最原始的代码和效果。默认情况下，表中直接用td划分的表将隐藏边框。

2、接下来，我们使用css添加样式并为表添加边框。表{边框：1px solid＃804040}修改后的效果是整个表格具有外边框，并且表格中没有边框。

3、然后我们使用css为td添加边框。表td {边框：1px solid＃804040}修改后的效果是每个td都添加了边框，显示效果是表格显示单个边框。

4、接下来，td显示左上角，表格显示右下角，实现边框表效果。表{Border-right：1px solid＃804040边框底部：1px实心＃804040}

表td {边框左：1px solid＃804040Border-top：1px solid＃804040}修改后的效果与预期的一样，但由于内部单元之间的间距，内部边界不连续。

5、最后，我们在表中添加了css代码：border-collapse：collapse用来消除单元格间距。这是：表{Border-right：1px solid＃804040边框底部：1px实心＃804040边境崩溃：崩溃}

表td {边框左：1px solid＃804040Border-top：1px solid＃804040}修改后，消除了单元间距，完美地实现了效果。