细线表格的几种做法（css）

最新推荐文章于 2024-06-21 09:13:54 发布

y490884700

最新推荐文章于 2024-06-21 09:13:54 发布

阅读量1.2w

点赞数 3

分类专栏：其他文章标签： css border table class c

其他专栏收录该内容

2 篇文章

订阅专栏

(一)效果一般

<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为<legnd>定义一个边框)

不错［还可参考教程中的另一些做法，下次补充］

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

<tr>

<td>

<fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center">

<legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</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" style="border-collapse: collapse;">




seperate 的边框如下：
|| ||

|| ||



collapse 的边框如下:

| | (两个相邻单元格的相邻边合并了)



说明



该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框

separate 缺省值。边框分开，不合并。

collapse 边框合并。即如果相邻，则共用同一个边框。

虽然在DIV+CSS 时代 table 的权重越来越低，但是有时候，还是局部地方table 还是挺好用的





特别是制表方面，还是table 比较的方便。