表格邊框htmlcss-有解無憂

我有一個框架 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>

為什么表格內的某些欄位邊界會合并并變得更粗，我將如何解決這個問題？

uj5u.com熱心網友回復：

這是由于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>

uj5u.com熱心網友回復：

已經問過這個問題：請參閱此處

似乎問題與瀏覽器/作業系統有關。像素未正確渲染。在 Mac 螢屏上，它似乎完全沒問題。嘗試不同的瀏覽器。

作為一個技巧，您可以使用更粗的表格邊框和更淺的顏色。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/476374.html

標籤：html css

上一篇：Javascript檢查是否多次單擊動態創建的按鈕

下一篇：從html中的id獲取文本