[英]Table borders html css
我有一個框架 div,這個框架內部是一個包含幾列和幾行的表格。 出於某種原因,一些邊界正在相互合並。
table { width: 50%; /* Ширина таблицы */ border: 1px solid black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ } th { background: #ccc; /* Цвет фона ячеек */ padding: 3px; /* Поля вокруг содержимого ячеек */ border-collapse: collapse; } td { font-family: Verdana; font-size: 16pt; border: 1px solid black; /* Граница вокруг ячеек */ text-align: center; border-collapse: collapse; } .brd { border: 5px black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */ border-style: inset; /*solid;*/ border-collapse: collapse; }
<div class="brd" align="center"> <table> <tr> <td>0</td> <td>1</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>1</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>
為什么表格內的某些字段邊界會合並並變得更粗,我將如何解決這個問題?
這是由於border-collapse
以及您在所有單元格上添加邊框的事實。
為避免該問題,您應該調整單元格邊框以僅獲得 1 個邊框:
/*ADDED*/
table{
border:0px;
border-collapse: initial;
border-spacing: 0px;
}
td{
border-bottom:0px;
border-right:0px;
border-collapse: initial;
}
tr > td:last-child {
border-right:1px solid black;
}
tr:last-child > td {
border-bottom:1px solid black;
}
table { width: 50%; /* Ширина таблицы */ border: 1px solid black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ } th { background: #ccc; /* Цвет фона ячеек */ padding: 3px; /* Поля вокруг содержимого ячеек */ border-collapse: collapse; } td { font-family: Verdana; font-size:16pt; border: 1px solid black; /* Граница вокруг ячеек */ text-align: center; border-collapse: collapse; } .brd { border: 5px black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */ border-style: inset; /*solid;*/ border-collapse: collapse; } /*ADDED*/ table{ border:0px; border-collapse: initial; border-spacing: 0px; } td{ border-bottom:0px; border-right:0px; border-collapse: initial; } tr > td:last-child { border-right:1px solid black; } tr:last-child > td { border-bottom:1px solid black; }
<div class="brd" align="center"> <table> <tr> <td>0</td> <td>1</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>1</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.