好看的table-css样式

1.单像素边框css表格

源代码：

<style type="text/css">
table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;
}
table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;
}
table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;
}
</style><!-- Table goes in the document BODY -->
<table class="gridtable">
<tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

2.带背景图的CSS样式表格

这个样式和和上面的差不多，只是多了背景图，的视觉上会好看不少。
源代码：

<style type="text/css">
table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;
}
table.imagetable th {background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;
}
table.imagetable td {background:#dcddc0 url('cell-grey.jpg');border-width: 1px;padding: 8px;border-style: solid;border-color: #999999;
}
</style><!-- Table goes in the document BODY -->
<table class="imagetable">
<tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

3. 自动换整行颜色的CSS样式表格（需要用到JS）

　　这个CSS表格会自动切换每一行的颜色，这种呈现方式，在我们编辑一个数据庞大的表格时，非常好用。

　　源代码：

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){if(document.getElementsByTagName){ var table = document.getElementById(id); var rows = table.getElementsByTagName("tr");for(i = 0; i < rows.length; i++){         if(i % 2 == 0){rows[i].className = "evenrowcolor";}else{rows[i].className = "oddrowcolor";}     }}
}window.onload=function(){altRows('alternatecolor');
}
</script><!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #a9c6c9;border-collapse: collapse;
}
table.altrowstable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
table.altrowstable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
.oddrowcolor{background-color:#d4e3e5;
}
.evenrowcolor{background-color:#c3dde0;
}
</style><!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr><td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr><td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr><td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr><td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr><td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table><!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

　4. 鼠标悬停高亮的CSS样式表格 (需要JS)

　　纯CSS显示表格高亮在IE中显示有问题，所以这边使用了JS来做高亮。

　　注意：不要定义格子的背景色。

　　源代码：

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #999999;border-collapse: collapse;
}
table.hovertable th {background-color:#c3dde0;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
table.hovertable tr {background-color:#d4e3e5;
}
table.hovertable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;
}
</style><!-- Table goes in the document BODY -->
<table class="hovertable">
<tr><th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"><td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"><td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"><td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"><td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

好看的table-css样式相关推荐

好看的table css样式
漂亮的table表格样式css源码漂亮的table表格样式 css源码 <head><title></title><style type="text ...
html table 好看样式,好看的Table CSS 样式表
坏狼安全网-漂亮CSS Tables body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica ...
html好看的按钮css样式大全,css3教程_五种漂亮样式，CSS3动画按钮效果
CSS代码: .button01 { width: 200px; margin: 50px auto 20px auto; } .button01 a { display: block; height ...
html中表格边框好看的样式,table完美css样式 table表格边框样式
蕃薯耀2016年6月15日星期三一.的css样式边框线不会重复叠加,不会有些粗有些细,全部统一. /**/ -{ /*-moz--; --border-radius:5px; border-rad ...
四个好看的CSS样式表格
原文地址为: 四个好看的CSS样式表格 1. 单像素边框CSS表格这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
四款好看实用的CSS表格样式分享
文章参考: https://www.w3cschool.cn/css/css-sfrk2opy.html https://www.php.cn/css-tutorial-375461.html htt ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
Vue中使用纯CSS样式设计Table横向竖向滚动自定义个别列固定
在Vue中CSS样式来设计Table横向竖向滚动自定义个别列表头固定前言一.表格数据二.样式设计 1.表格与外层DIV样式 2.固定表头的样式(重要) 总结前言大家一定使用过很多UI,UI都 ...
html表格居中设置css样式,css怎么设置table居中？
一般情况下,页面中可以利用align进行页面的居中.靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,下面我们来看一下使用css设置table居中的方法. css设置居中的方法: 1.利用marg ...

好看的table-css样式

好看的table-css样式相关推荐

最新文章

热门文章