CSS中的表格2️⃣之合并/拆分单元格以及单元格中在存放表格(跨行或者跨列)
生活随笔
收集整理的這篇文章主要介紹了
CSS中的表格2️⃣之合并/拆分单元格以及单元格中在存放表格(跨行或者跨列)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
需求:在consequence中,增加了一條記錄,并且重用了兩個信息沒有改變的單元格.也就是增加新行的時候,只需要列出要增加的不同的信息
?? ??? ?consequence ? ? August 9 ? 93 ?4242ft 7289 ?5/5?
?? ??? ??? ??? ??? ??? ?August 27 ?98 ? ? ? ? ? ? ? 4/5?
?? ??? ?HTML中可以使用rowspan屬性指定一個表格數據單元格占多少行,然后從這個單元格所跨越的其他行中
?? ??? ?刪除相應的表格數據元素.看例子先咯
?? ??? ?ok,看過例子之后,我們繼續看下跨列,只需要為td元素添加一個colspan屬性,然后指定列數就可以了.
?? ??? ?與rowspan不同,跨多列的時候,需要刪除同一行中表格數據元素;看例子咯
?? ??? ?另外td中可以同時出現colspan和rowspan
先看下效果圖
代碼如下
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表格1</title><style type="text/css">td,th {border: 1px solid black;/* 單元格設置邊框 */}table {margin-left: 20px;margin-right: 20px;border: thin solid black;/* 表格標題在表格的下方 */caption-side: bottom;/* border-spacing: 10px 30px; */border-collapse: collapse;}th,td {border: thin dotted gray;}th {background-color: #00FFFF;}caption {font-style: italic;padding-top: 8px;}.text-center {text-align: center;}.text-right {text-align: right;}.cell-color {background-color: #fcba7a;}</style></head><body><!-- 分析;一共是7行6列 --><div><table style="margin-top: 100px;"><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr><tr><td >june16</td><td >75</td><td >1204ft</td><td >29686</td><td >4/5</td><td >4/5</td></tr><tr><td rowspan="2">june16</td><td >75</td><td rowspan="2">1204ft</td><td rowspan="2">29686</td><td >4/5</td><td >4/5</td></tr><tr><td >75</td><td >4/5</td><td >4/5</td></tr></table><table style="margin-top: 100px;"><tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr><tr><td >june16</td><td >75</td><td >1204ft</td><td >29686</td><td >4/5</td><td >4/5</td></tr><tr ><td >june16</td><td >75</td><td >1204ft</td><td >29686</td><td >4/5</td><td >4/5</td></tr><tr><td >75</td><td colspan="5">4/5</td></tr></table></div></body> </html>?
總結
以上是生活随笔為你收集整理的CSS中的表格2️⃣之合并/拆分单元格以及单元格中在存放表格(跨行或者跨列)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript中方法或者变量名称前
- 下一篇： CSS 基本样式