table 样式详解
生活随笔
收集整理的這篇文章主要介紹了
table 样式详解
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.table 中css樣式控制border 只能控制外邊框，內(nèi)邊框需要寫<table border="1">
2.table 會自動撐大，即使td 設(shè)置了 width和height這與div 是不同的
3.只有一個table的時候 ，高度自適應(yīng)全屏
<style type="text/css">table ,td,body{padding: 0;margin: 0;}html,body{height:100%;font-size:12px;}td {border:1px solid red;font-size: 12px;color: #000000;}#main{border:1px solid red;width:100%;height:100%;}#header{height:94px;border:1px solid red;}</style> </head> <body> <table id="main"><tr><td id="header">我的頂部</td></tr><tr><td>我是主要內(nèi)容</td></tr> </table> </body>?
4.table可以為 td設(shè)置 border-radius 屬性
5.多個元素的時候，最后一個元素高度要自適應(yīng)全屏（高度計算時，table 的border無論設(shè)置多大都不影響，也就是說border是包含在計算的高度中的，這個與div不同）
<style type="text/css">table, td, body{ padding:0; margin:0; }table{ border-collapse:collapse; }.he1{ width:100%; height:200px; background:black; }.he2{ width:100%; height:100px; background:red; }</style><script>$(document).ready(function () {var h1 = $(".he1").height();var h2 = $(".he2").height();$("#main").height($(window).height()-h1-h2);});</script> </head> <body> <div class="he1"></div> <div class="he2"></div> <table id="main" border="5"><tr><td id="header">我的頂部</td></tr><tr><td>我是主要內(nèi)容</td></tr> </table> </body>?
?
轉(zhuǎn)載于:https://www.cnblogs.com/haigui-zx/p/6296267.html
總結(jié)
以上是生活随笔為你收集整理的table 样式详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转：20分钟教你使用hexo搭建gith
- 下一篇： 【贪心算法】POJ-1017