还是关于css控制table的问题,如何让th的四个边框全部显示为红色

html-css08

还是关于css控制table的问题,如何让th的四个边框全部显示为红色,第1张

很简单:用2个样式可以解决,本代码未用TH,全部用了TR和td,原理一样,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

<!--

.td01 {

border: 1px solid red

border-right: none

}

.td02 {

border: 1px solid red

}

-->

</style>

</head>

<body>

<table width="200" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td class="td01">&nbsp</td>

    <td class="td01">&nbsp</td>

    <td class="td01">&nbsp</td>

    <td class="td01">&nbsp</td>

    <td class="td02">&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

  <tr>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

    <td>&nbsp</td>

  </tr>

</table>

</body>

</html>

下面来个例子,你可以复制到你的编辑器里修改测试

<style type="text/css">

table.gridtable {}{

    font-family: verdana,arial,sans-serif

    font-size:11px

    color:#333333

    border-width: 1px

    border-color: #666666

    border-collapse: collapse

}

table.gridtable th {}{

    border-width: 1px

    padding: 8px

    border-style: solid

    border-color: #666666

    background-color: #dedede

}

table.gridtable td {}{

    border-width: 1px

    padding: 8px

    border-style: solid

    border-color: #666666

    background-color: #ffffff

}

</style>

<!-- Table goes in the document BODY -->

<table class="gridtable">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr>

    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>

</tr>

<tr>

    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>

</tr>

</table>

CSS(层叠样式表)级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。