HTML控制表格邊線顯示。
阿新 • • 發佈:2019-02-10
前言:
如果我們想讓一個表格有黑色的邊線,很容易實現。
使用以下程式碼即可。
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
但是這樣的表格我們是無法任意空中邊線的顯示的。
比如我們想讓表格的右上角不顯示。
這時,我們就要一點一點畫出表格的邊線;
用td的邊線組成整個表的邊線,然後控制td邊線的顯示。
<style> .myTable { border-collapse:collapse; border-spacing:0; width:900px; text-align:center; margin-left:30px; } .myTable td { border-top:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000; border-right:1px solid #000000; padding:3px;} .myTable td.hiddenLeftSide {border-right:1px solid #FFFFFF;} .myTable td.hiddenTopSide {border-top:1px solid #FFFFFF;} </style> <table class="myTable"> <tr> <td>表格邊線控制</td> <td>border-top:1px solid #000000</td> <td class="hiddenLeftSide hiddenTopSide">表格邊線控制</td> </tr> <tr> <td>表格邊線控制</td> <td>表格邊線控制</td> <td>表格邊線控制</td> </tr> <tr> <td width="300px">border-left:1px solid #000000; </td> <td width="300px">合併border-collapse:collapse;單元格 </td> <td width="300px">border-right:1px solid #000000;</td> </tr> <tr> <td>表格邊線控制</td> <td>表格邊線控制</td> <td>表格邊線控制</td> </tr> <tr> <td>表格邊線控制</td> <td>border-bottom:1px solid #000000; </td> <td>表格邊線控制</td> </tr> </table>
使用以上方法即可實現。
注意:
把右上角的單元格畫成白線時,只有按以下這麼寫才行;
.myTable td.hiddenLeftSide
如果單獨寫為下面這種形式在td中使用是沒有效果的!
hiddenLeftSide
學習總結:
這裡面我們瞭解了表格邊線控制的4個屬性;border-top:1px solid #000000; border-top:1px solid #000000;
border-top:1px solid #000000; border-left:1px solid #000000;
border-top:1px solid #000000; border-bottom:1px solid #000000;
border-top:1px solid #000000; border-right:1px solid #000000;
還有【設定表格的邊框是否被合併為一個單一的邊框】這一屬性。
border-collapse:collapse;