[研究]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>

(完)

相關

[研究]Bootstrap Table (表格)

[研究]Bootstrap Table (表格)

2021-07-17

Bootstrap 4 Tables
https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

Tables · Bootstrap
https://getbootstrap.com/docs/4.1/content/tables/

Bootstrap 表格 | 菜鸟教程
https://www.runoob.com/bootstrap/bootstrap-tables.html

表格 (Tables) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
https://bootstrap5.hexschool.com/docs/5.0/content/tables/

Official CDN of Bootstrap and Font Awesome · BootstrapCDN
https://www.bootstrapcdn.com/

table-striped 桌紋
table-bordered 桌邊
table-hover 桌面懸停
table-responsive 表響應式

使用範例

<table class="table table-striped table-bordered table-hover table-responsive" cellspacing="0" rules="all" border="1" width="50%" style="border-collapse: collapse;">

<asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-bordered table-hover table-responsive" >

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <table class="table table-striped table-bordered table-hover table-responsive"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>

(完)