细线表格的⼏种做法(css)(⼀)效果⼀般
<style type="text/css">
<!--
table {border-collapse:collapse;}
td{
border-left:0;
border-top:0;
border-right:1px solid #00cd11;
border-bottom:1px solid #cb1122;
font-family:"Courier New", Courier, mono;
font-size:11px;
height:25px;
padding:0 12px 0 12px;
border-collapse:collapse;
}
.tdblue{
font-weight:bold;
color:#3C00C6;
}
-->
</style>
---------------------------------------
<table cellspacing="0" cellpadding="0">
<tr>
<td class="tdblue">Select My Menu</td>
</tr>
<tr>
<td>Who am I?</td>
</tr>
<tr>
<td>细线表格</td>
</tr>
<tr>
<td>Contact me</td>
</tr>
</table>
---------------------------------------
(⼆)推荐√√
<style>
table{
border-collapse:collapse;
border: 1px solid #000000;
}
td{
border-collapse:collapse;
border: 1px solid #000000;
}
</style>
<table>
<tr><td>123</td><td>132ssss</td></tr>
<tr><td>123</td><td>132sss</td></tr>
<tr><td>123</td><td>132</td></tr>
</table>
---------------------------------------
(三)推荐√
<style type="text/css">
table{border:1px solid #000;border-width:1px 0 0 1px;margin:2px 0 2px 0;text-align:center;border-collapse:collapse;} td,th{border:1px solid #000;border-width:0 1px 1px 0;margin:2px 0 2px 0;text-align:left;}
th{text-align:center;font-weight:600;font-size:12px;background-color:#F4F4F4;}
</style>
<table width="236">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
---------------------------------------
(四)效果较好
.thin{background:#000000}
.thin td{background:#FFFFFF;text-align:center}
<table border="0" cellspacing="1" cellpadding="0" class="thin">
---------------------------------------
附录:
⽤css设计细线表格并给表头再加个框
⽤css设计细线表格并给表头再加个框
(⽤CSS为<legnd>定义⼀个边框)
不错[还可参考教程中的另⼀些做法,下次补充]
<table width="200"" cellspacing="0" cellpadding="0">
table设置内边框<tr>
<td>
<fieldset align="center">
<legend > 表中表效果Ⅰ</legend>
<br>
</fieldset>
</td>
</tr>
</table>
border-collapse:collapse :
table中css控制 css的border-collapse
<table width="100%" cellspacing="0" cellpadding="5" border="1" bordercolor="#0099CC" >
seperate 的边框如下:
|| ||
|| ||
collapse 的边框如下:
| | (两个相邻单元格的相邻边合并了)
说明
该CSS属性⽤来设定表格的⾏和列的边框是合并成单边框,还是分别有各⾃的边框
separate 缺省值。边框分开,不合并。
collapse 边框合并。即如果相邻,则共⽤同⼀个边框。
collapse 边框合并。即如果相邻,则共⽤同⼀个边框。
虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地⽅table 还是挺好⽤的特别是制表⽅⾯,还是table ⽐较的⽅便。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论