css去掉table表格外围边框

快乐打工仔 分类:实例代码

css去掉table表格外围边框属于前端实例代码,有关更多实例代码大家可以查看

默认状态下table有外围边框,实际应用可能需要去掉周围的边框。

下面通过代码实例介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
table{
  border-collapse:collapse;
  border:0px solid #999;
  font-size:12px;
  margin:50px;
}
table td{
  border-top:0;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
  border-left:0;
}
table tr.lastrow td{
  border-bottom:0;
}
table tr td.lastCol{
  border-right:0;
}
</style>
</head>
<body>
<table>
  <tr>
    <td>犀牛前端部落</td>
    <td>div教程</td>
    <td>css教程</td>
    <td>javascript教程</td>
    <td>站长交流</td>
    <td class="lastCol">外语程度</td>
  </tr>
  <tr>
    <td>jquery教程</td>
    <td>谈天说地</td>
    <td>贴图专区</td>
    <td>正则表达式教程</td>
    <td>c#教程</td>
    <td class="lastCol">java教程</td>
  </tr>
  <tr class="lastrow">
    <td>antzone</td>
    <td>webName</td>
    <td>age</td>
    <td>target</td>
    <td>done</td>
    <td class="lastCol">fighting</td>
  </tr>
</table>
</body>
</html>

css去掉table表格外围边框,这样的场景在实际项目中还是用的比较多的,关于css去掉table表格外围边框就介绍到这了。

回复

我来回复
  • 暂无回复内容