div html表格样式,table 表格 div + css 样式

【注意：此文章为博主原创文章！转载需注意，请带原文链接，至少也要是txt格式！】

因偶尔在文章中会粘贴表格，发现没有任何样式，非常难看，然后发现freebuf中的样式还算好看，那么就分享一下啦。

首先，在你需要有样式的页面调用如下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;

}

#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;

}

然后，找到你的正文的地方，在你正文的开始前面放入

最后就成功了。如下样式。

table 样式 div+css

个人觉得还是不错的。

这里你也可以看一下：常见端口漏洞总结 (各个端口安全隐患总结) 这篇文章里面有表格，也可以看到样式。

这里注意，还可以通过colgroup来控制每列的列宽，上文中的列宽就是用这个控制的哦。

注意是在table和thead中间用colgroup来控制对应的列宽占比。