A-A+
table 表格 div + css 样式

【注意:此文章为博主原创文章!转载需注意,请带原文链接,至少也要是txt格式!】
因偶尔在文章中会粘贴表格,发现没有任何样式,非常难看,然后发现freebuf中的样式还算好看,那么就分享一下啦。
首先,在你需要有样式的页面调用如下CSS。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <style type="text/css"> #contenttxt hr { display: block; height: 0px; border: 0; border-top: 1px solid #ccc; margin: 15px 0; padding: 0; } #contenttxt table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 15px 0; } #contenttxt table thead { background-color: #f9f9f9; } #contenttxt table td, #contenttxt table th { min-width: 40px; height: 30px; border: 1px solid #ccc; vertical-align: top; padding: 2px 4px; text-align: left; box-sizing: border-box; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } #contenttxt table td.active, #contenttxt table th.active { background-color: #ffffee; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } </style> |
然后,找到你的正文的地方,在你正文的开始前面放入
1 | <div id="contenttxt"> |
继续,在你正文结束的时候放入
1 | </div> |
最后就成功了。如下样式。
个人觉得还是不错的。
这里你也可以看一下:常见端口漏洞总结 (各个端口安全隐患总结) 这篇文章里面有表格,也可以看到样式。
这里注意,还可以通过colgroup来控制每列的列宽,上文中的列宽就是用这个控制的哦。
注意是在table和thead中间用colgroup来控制对应的列宽占比。
1 2 | <table><colgroup> <col width="10%" /> <col width="15%" /> <col width="11%" /> <col width="21%" /> <col width="53%" /></colgroup> <thead> |
布施恩德可便相知重
微信扫一扫打赏
支付宝扫一扫打赏