A-A+

table 表格 div + css 样式

2018年10月25日 22:28 学习笔记 暂无评论 阅读 314 views 次

【注意：此文章为博主原创文章！转载需注意，请带原文链接，至少也要是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>

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

table 样式 div+css

table 样式 div+css

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

这里注意，还可以通过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>

布施恩德可便相知重

微信扫一扫打赏

支付宝扫一扫打赏

×

给我留言