[研究]HTML、CSC表格內外框線

[研究]HTML、CSC表格內外框線

2025-12-03

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 20.2

********************************************************************************

某 <table border="1"> 只會產生 表格外框 的線，但內部 不會有格線，解決方法。

方式 1：使用 border-collapse: collapse 搭配 CSS 邊框

<table style="border-collapse: collapse; border: 1px solid black;"> <tr> <th style="border: 1px solid black;">欄位1</th> <th style="border: 1px solid black;">欄位2</th> </tr> <tr> <td style="border: 1px solid black;">資料1</td> <td style="border: 1px solid black;">資料2</td> </tr> </table>

方式 2：用全局 CSS 樣式（建議）

<style> table { border-collapse: collapse; /* 合併邊框 */ border: 1px solid black; /* 表格外框 */ } th, td { border: 1px solid black; /* 每個儲存格邊框 */ padding: 5px; /* 內距，看起來不擠 */ } </style> <table> <tr> <th>欄位1</th> <th>欄位2</th> </tr> <tr> <td>資料1</td> <td>資料2</td> </tr> </table>

方式 3：用 id（只影響那一個 table）

HTML

<style> #MyTable { border-collapse: collapse; border: 1px solid black; } #MyTable th, #MyTable td { border: 1px solid black; padding: 5px; } </style> <table id="MyTable"> <tr> <th>欄位1</th> <th>欄位2</th> </tr> <tr> <td>資料1</td> <td>資料2</td> </tr> </table>

方式 4：用 class（可套用到多個表格）

<style> .bordered-table { border-collapse: collapse; border: 1px solid black; } .bordered-table th, .bordered-table td { border: 1px solid black; padding: 5px; } </style> <table class="bordered-table"> <tr> <th>欄位1</th> <th>欄位2</th> </tr> <tr> <td>資料1</td> <td>資料2</td> </tr> </table>

(完)

相關