Граница таблицы 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>

Почему некоторые границы полей внутри таблицы сливаются и становятся жирнее, и как мне это исправить?

Ваш браузер увеличен или у вас есть какое-либо масштабирование в настройках вашей ОС? Это единственный раз, когда я вижу какие-либо несоответствия с вашими границами как в FF, так и в Chrome.

AStombaugh 17.05.2022 13:30
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
4
1
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Этот вопрос уже задавали: см. здесь

Похоже, проблема связана с браузером/ОС. пиксели отображаются неправильно. На экранах Mac все выглядит нормально. Попробуйте разные браузеры.

В качестве уловки вы можете использовать более жирную границу таблицы и более светлый цвет.

Ответ принят как подходящий

Это связано с 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>

Другие вопросы по теме