怎么用CSS设置html中的表格边框样式

html-css08

怎么用CSS设置html中的表格边框样式,第1张

您好!以下是最典型的细线表格,具备最基本的设置。供参考:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>表格CSS设置</title>

<style>

#tb1 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 2px solid black   /* 外框粗线、内部细线表格,表格线为黑色 */

}

#tb2 {

    border-collapse: collapse /* 折叠边框产生细线表格*/

    border: 1px solid red     /* 细线表格,表格线为红色 */

}

</style>

</head>

<body>

<br>

<table id="tb1" width="379" height="87" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="34">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

<br>

<table id="tb2" width="379" height="89" border="1" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td width="123" height="36">&nbsp</td>

      <td width="122">&nbsp</td>

      <td width="126">&nbsp</td>

    </tr>

    <tr>

      <td height="25">&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

    <tr>

      <td>&nbsp</td>

      <td>&nbsp</td>

      <td>&nbsp</td>

    </tr>

  </tbody>

</table>

</body>

</html>

显示结果:

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