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

html-css024

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

<style>

.myTable th{

border:1px solid #fff

}

</style>

<table class="myTable">

<caption>table title and/or explanatory text</caption>

<thead>

<tr>

<th>header</th>

</tr>

</thead>

<tbody>

<tr>

<td>data</td>

</tr>

</tbody>

</table>

table 边框都是border属性，一般设置在th、tr、td上

border

简写属性，用于把针对四个边的属性设置在一个声明。

border-style

用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width

简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color

简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

<!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/htmlcharset=gb2312" />

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

<style type="text/css">

input{ border:0px}

.ov{ border:2px solid #009999}

.input{ border:0px}

</style>

</head><body>

<form id="form1" name="form1" method="post" action="">

<table width="366" border="0" cellspacing="1" bordercolor="#333333" bgcolor="#333333">

<tr>

<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"></td>

<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>A</label></td>

<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>B</label></td>

</tr>

<tr>

<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">1</td>

<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield" />

</label></td>

<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield2" />

</label></td>

</tr>

<tr>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">2</td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield3" />

</label></td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield4" />

</label></td>

</tr>

<tr>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">3</td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield5" />

</label></td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield6" />

</label></td>

</tr>

<tr>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">4</td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield7" />

</label></td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield8" />

</label></td>

</tr>

<tr>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">5</td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield9" />

</label></td>

<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>

<input type="text" name="textfield10" />

</label></td>

</tr>

</table>

</form>

</body>

</html>

做了一个，功能差不多的。