Как убрать границу между ячейками таблицы html?

Question

Всем привет) Не могу убрать границу между определенными ячейками html-таблицы, но при этом не объдиняя их. И оставить отступы других ячеек без изменения. Ячейка должна выглядеть как одна, но по факту там их две.

Answer 1

Манипулировать отступами между отдельным ячейками в таблице нельзя, можно пойти другим путем и использовать дополнительные элементы с position:absolute в td для создания border и эффекта отступа.

Например так:

table {
  border: 3px solid #009dff;
  text-align: center;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  padding: 2px;
  font-family: arial;
}

thead {
  background-color: #f4af16;
  color: white;
}

thead tr:first-of-type td {
  border-bottom: 1px solid white;
}

thead tr:last-of-type td {
  border-bottom: 2px solid white;
}

tbody tr {
  position: relative;
}

tbody .border {
  position: absolute;
  border: 1px solid black;
  left: 0px;
  top: 2px;
  right: 0px;
  bottom: 2px;
  display: block;
}

td {
  width: 100%;
  padding: 10px;
  ;
}

<table>
  <thead>
    <tr>
      <td colspan="2">Количество в коробке</td>
    </tr>
    <tr>
      <td>Штук</td>
      <td>Килограм</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="border"></div>12000</td>
      <td>18,48</td>
    </tr>
    <tr>
      <td>
        <div class="border"></div>12000</td>
      <td>18,48</td>
    </tr>
    <tr>
      <td>
        <div class="border"></div>12000</td>
      <td>18,48</td>
    </tr>
    <tr>
      <td>
        <div class="border"></div>12000</td>
      <td>18,48</td>
    </tr>
  </tbody>
</table>

БЛОГ НА HUSL

Как убрать границу между ячейками таблицы html?

Ответы (1 шт):