Граница таблицы HTML только посередине

Я хочу создать таблицу с линией прямо посередине с помощью CSS. Никаких других границ, кроме центра стола. Мой стол 2x4
Я попытался использовать прикрепленный код, но он добавляет строки снаружи слева и справа

table {
  border-collapse: collapse;
}

tr {
  border: none;
}

td {
  border-right: solid 1px #f00;
  border-left: solid 1px #f00;
}

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

html css

21.05.2018 17:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 385

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете изменить свое правило td, чтобы использовать first-child псевдокласс, например:

td:first-child {
  border-right: solid 1px #f00;
}

Пример:

table {
  border-collapse: collapse;
}

tr {
  border: none;
}

td:first-child {
  border-right: solid 1px #f00;
}

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

Сработало отлично. Мне нужно посмотреть, что на самом деле делает x-child.

— 21.05.2018 17:34

21.05.2018 17:16