【注意：此文章為博主原創文章！轉載需注意，請帶原文鏈接，至少也要是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來控制對應的列寬占比。

總結

以上是生活随笔為你收集整理的div html表格样式,table 表格 div + css 样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。