JSFiddle - React, Tailwind, and code Playground

Граница для колонки таблицы при border separate. (Нужно аккуратно переделать)

by Ankhena

HTML

<table class="comparison" rules="groups">
   <colgroup>
        <col id="col1">
        <col id="col2">
        <col id="col3">
        <col id="col4">
        </colgroup><tbody><tr>
            <td><br></td>
            <td><img src="/linktoimg"><div class="table__title">Header</div></td>
            <td><img src="/linktoimg"><div class="table__title">Header</div></td>
            <td><img src="/linktoimg"><div class="table__title">Header</div></td>
        </tr>
        <tr>
            <td>Маркость</td>
            <td><span class="table_cross"></span></td>
            <td><span class="table_check"></span></td>
            <td><span class="table_check"></span></td>
        </tr>
        <tr>
            <td>Прозрачность</td>
            <td><span class="table_check"></span></td>
            <td><span class="table_cross"></span></td>
            <td><span class="table_cross"></span></td>
        </tr>
        <tr>
            <td>Экологичность</td>
            <td><span class="table_check"></span></td>
            <td><span class="table_check"></span></td>
            <td><span class="table_cross"></span></td>
        </tr>
        <tr>
            <td>Защита от горячих предметов</td>
            <td><span class="table_check"></span></td>
            <td><span class="table_cross"></span></td>
            <td><span class="table_cross"></span></td>
        </tr>
        <tr>
            <td>Срок службы</td>
            <td>3-5 лет</td>
            <td>до 1 года</td>
            <td>до 1 года</td>
        </tr>
        <tr>
            <td>Защитная&nbsp;упаковка</td>
            <td><span class="table_check"></span></td>
            <td><span class="table_check"></span></td>
            <td><span class="table_cross"></span></td>
        </tr>
        <tr>
            <td>Гарантия</td>
            <td><span class="table_check"></span></td>
            <td><span class="table_cross"></span></td>
            <td><span class="table_cross"></span></td>
        </tr>
   ...

CSS

table {
  border-collapse: separate;
  border-spacing: 15px 0;

}

table tr td {
  padding: 10px 20px;
}

table tr td:nth-child(n + 2) {
  text-align: center;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

table tr:first-child td:nth-child(n + 2) {
  //border-top: 1px solid #ccc;
}

table tr:last-child td:nth-child(n + 2) {
  //border-bottom: 1px solid #ccc;
}

table .table_check {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
}

table .table_cross {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

table tr td:nth-child(2) {
	//border-left: 2px solid #340778;
	//border-right: 2px solid #340778;
	//border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    //border-image-slice: 1;
}

table tr:first-child td:nth-child(2) {
	//border-top: 2px solid #340778;
	//border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    //border-image-slice: 1;
}

table tr:last-child td:nth-child(2) {
	//border-bottom: 2px solid #340778;
	//border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    //border-image-slice: 1;
}

col:nth-child(2) {
  background: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top left / 2px 100%, linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%) no-repeat top right / 2px 100%,
linear-gradient(to left, #3acfd5, #3acfd5) no-repeat top / 100% 2px;

}

table tr td:nth-child(2)  {
  border: none;
}
table tr:last-child td:nth-child(2)  {
  background: linear-gradient(to left, #3a4ed5, #3a4ed5) no-repeat left 100% / 100% 2px;
}