1.用CSS控制只显示Table的水平线，而不显示垂直线和边框？
.table1
td{border-bottom:1px solid black}
<STYLE TYPE="text/css">
.table1
td{border-bottom:1px solid black}
</STYLE>
</HEAD>
<BODY class="table1">
<TABLE cellspacing="0">
<TR>
<TD>sdf</TD>
<TD>dsf</TD>
<TD>df </TD>
</TR>
<TR>
<TD>sdf </TD>
<TD>sdf </TD>
<TD>sdf</TD>
</TR>
<TR>
<TD>sdf</TD>
<TD>sdf</TD>
<TD>sdf</TD>
</TR>
2.显示table的竖线
1）只显示指定行CLASS下的某个元素只显示竖线
.tabletree4j-gird .headerbg td{
border:1px solid #c8c8c8;
padding:0;
}
<BODY class="table1">
<TABLE cellspacing="0" class="tabletree4j-gird ">
<TR class="headerbg">
<TD>sdf</TD>
<TD>dsf</TD>
<TD>df </TD>
</TR>
<TR>
<TD>sdf </TD>
<TD>sdf </TD>
<TD>sdf</TD>
</TR>
<TR>
<TD>sdf</TD>
<TD>sdf</TD>
<TD>sdf</TD>
</TR>
3.
用CSS样式描述表格Table边框
<html><head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10pt;
border-top: 15px solid red;
border-left: 15px solid red;
border-right: 5px dashed black;
border-bottom: 10px dashed blue; }
TD, TH {
background: white;
border: outset 5pt;
horizontal-align: right; }
CAPTION {
border: ridge 5pt blue;
border-top: ridge 10pt blue; }
</style><body>
<table summary="jb51.net - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<thabbr="salesperson" scope="col">Person</th>
<thabbr="sales" scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr. Jin</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<td colspan="2">Let's sale, sale, sale!</td>
</tr></tfoot></table></body></html>
4.Css制作table细线表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css制作table细线表格</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
-->
</style>
</head>
<body>
<table>
<caption>表格头</caption>
<thead>
<tr><th>名称</th><th>网址</th><th>时间</th></tr>
</thead>
<tbody>
<tfoot>
<tr><td colspan="3">下一页</td></tr>
</tfoot>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
</tbody>
</table>
</body>
</html>
6,使用CSS中display实现多个div标签在同一行,，用DIV实现table的效果
<!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 runat="server">
<title>使用CSS中display实现多个div标签在同一行,，用DIV实现table的效果</title>
<style type="text/css">
#div1, #div2, #div3, #div4, #div5 { display: inline-block; width: 100px; line-height: 28px; background-color: #fafafa; text-align: center; margin-left: 5px; }
</style>
</head>
<body>
<div id="div1">
编号
</div>
<div id="div2">
姓名
</div>
<div id="div3">
性别
</div>
<div id="div4">
地址
</div>
<div id="div5">
操作
</div>
</body>
</html>
7.同一行三个DIV 第一个居左，第二个居中，第三个居右，怎么设置
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
