<style type="text/css">
table {
border-collapse: collapse;
line-height: 125%;
}
th, td {
text-align: left;
vertical-align: top;
}
table {
margin: 1em 0 0 1px;
border: 1px solid;
border-color: #3366CC;
border-spacing: 0;
border-collapse: collapse;
clear: right;
}
th {
font-weight: bold;
text-align: left;
padding: 6px 12px;
border: 1px solid #3366CC;
background-color: #e5ecf9;
}
td {
padding: 6px 12px;
border: 1px solid #3366CC;
background-color: white;
text-align: left;
vertical-align: top;
}
td h1, td h2, td h3, td h4, td h5 {
margin-left: 0;
}
td ul, td ol {
margin: 0 0 1em 15px;
padding: 0;
}
td p, td dl {
margin: 0 0 1em 0;
padding: 0;
}
td *+p {
margin: 1em 0 0 0;
padding: 0;
}
tr.alt td, td.alt {
background: #f5f5f5;
}
</style>
<table>
<th>A</th>
<th>B</th>
<tr class="alt">
<td class="alt">1</td>
<td class="alt">2</td>
</tr>
<tr>
<td><p>3</p></td>
<td><ul><li>4</li><li>5</li></ul></td>
</tr>
<tr class="alt">
<td class="alt">6</td>
<td class="alt">7</td>
</tr>
</table>
最终效果:
分享到:
相关推荐
NULL 博文链接:https://javapub.iteye.com/blog/733910
优化表格的过程中当然是却漂亮越好啊,所以css优化表格的属性就派上用场了,接下来介绍css优化细线表格注意的一些细节,需要的朋友可以了解下
css教程:实现符合Web标准的细线表格 随着应用CSS网页布局构建网页, 以及web标准的广泛普及与发展, 表格渐渐被人们遗忘, 但是表格还是有它优秀的一面, 数据处理用表格的确省了不少麻烦! 这个是细表格的...
这里推荐直接使用css来产生一个细线表格。 使用方法也很简单: 第一:导入table.css 复制代码代码如下: <link rel=”stylesheet” type=”text/css” href=”./css/table.css”/> 第二:套用格式 复制...
细线表格如果单纯设置边框,很难保证浏览器兼容。
现在在所谓“div css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有...
非常用创意的用ul+li实现的细线表格效果,不用table
用CSS添加细线可以.不用也可以.本文就是介绍不用CSS也给表格添加细线的方法
Webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾起来,记忆,就是...
document.all.csss.href = "a.css"; 并排显示 display:inline 隐藏焦点 hidefocus=true 根据宽度换行 style="word-break:break-all" 自动刷新 ;URL=http://c98.yeah.net"> 简单邮件 ...