БЛОГ НА HUSL


Можно ли убрать двойную рамку у таблицы

Автор вопроса: Светлана С 

table {
  width: 80px;
  border-collapse: collapse;
  border-spacing: 10px 30px;
  border: 2px solid black; /* Жирные границы */
  margin: 0;
}

tr, td /*border: 2px solid transparent;  Невидимые  границы */
{
  border: 1px solid gray;
  padding: 8px;
  text-align: left;
}

.el-left {
  text-align: left;
  text-transform: uppercase;
}

.el {
  text-align: right;
  text-transform: uppercase;
}

.ele {
  border: 1px solid gray;
  text-align: right;
  text-transform: uppercase;
}

.letter-red {
  font-size: 4rem;
  text-align: center;
  color: red;
}

.letter-blue {
  font-size: 4rem;
  text-align: center;
  color: blue;
}
<table class="table1">
  <td>
    <table class="table2">
      <tr>
        <td>7</td>
        <td class="emp" rowspan='3'></td>
        <td class="letter-red" rowspan='3'>N</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>14,067</td>
      </tr>
      <tr>
        <td class="ele" colspan='3'>Азот о</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>P</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Фосфор</td>
      </tr>

      <tr>
        <td class="letter-blue" rowspan='3'>V</td>
        <td rowspan='3'></td>
        <td>23</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>50,941</td>
      </tr>
      <tr>
        <td class="el-left" colspan='3'>Ванадий</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>As</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Мышьяк</td>
      </tr>
    </table>

    <td>
      <table class="table2">
        <tr>
          <td>8</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>O</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>15,994</td>
        </tr>
        <tr>
          <td class="ele" colspan='3'>Кислород</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>S</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>32,06</td>
        </tr>
        <tr>
          <td class="el" colspan='3'>Сера</td>
        </tr>

        <tr>
          <td class="letter-blue" rowspan='3'>Cr</td>
          <td rowspan='3'></td>
          <td>24</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>51,996</td>
        </tr>

        <tr>
          <td class="el-left " colspan='3'>Хром</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>Se</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>32,06</td>
        </tr>

        <td class="el" colspan='3'>Селен</td>



      </table>
    </td>


</table>

Можно ли сделать вот так?


Источник

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

Автор решения: proffessor17 

table { 
    width: 80px;
    border-collapse: collapse;
    border-spacing: 10px 30px;
    border: none; /* Убрали границу внешней таблицы */
    margin: 0;
}

.table2 {
    border: 2px solid black; /* Добавили границу только для внутренних таблиц */
}

tr, td {
    border: 1px solid gray;
    padding: 8px;
    text-align: left;
}

попробуй так, не гарантирую

→ Ссылка
Автор решения: Daniil Loban

По сути ничего менять не нужно кроме CSS селектора table:has(table) вместо table и для требуемого результата добавить пару стилей:

table {
  border-collapse: collapse;
}

.table2 tr,
.table2 td
{
  padding: 8px;
}

Средняя линия будет серой а так же внутри основного бордера будет виден серый по границе, причина в том что ячейки имеют полноценный бордер, возможно этого можно избежать указав явно какие бордеры имеет конкретная ячейка например только правый и нижний (без левого и верхнего)

table:has(table) {
  width: 80px;
  border-collapse: collapse;
  border-spacing: 10px 30px;
  border: 2px solid black;
  /* Жирные границы */
  margin: 0;
}

table {
  border-collapse: collapse;
}

.table2 tr,
.table2 td
{
  padding: 8px;
}

tr,
td
/*border: 2px solid transparent;  Невидимые  границы */

{
  border: 1px solid gray;
  padding: 0px;
  text-align: left;
}

.el-left {
  text-align: left;
  text-transform: uppercase;
}

.el {
  text-align: right;
  text-transform: uppercase;
}

.ele {
  border: 1px solid gray;
  text-align: right;
  text-transform: uppercase;
}

.letter-red {
  font-size: 4rem;
  text-align: center;
  color: red;
}

.letter-blue {
  font-size: 4rem;
  text-align: center;
  color: blue;
}
<table class="table1">
  <td>
    <table class="table2">
      <tr>
        <td>7</td>
        <td class="emp" rowspan='3'></td>
        <td class="letter-red" rowspan='3'>N</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>14,067</td>
      </tr>
      <tr>
        <td class="ele" colspan='3'>Азот о</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>P</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Фосфор</td>
      </tr>

      <tr>
        <td class="letter-blue" rowspan='3'>V</td>
        <td rowspan='3'></td>
        <td>23</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>50,941</td>
      </tr>
      <tr>
        <td class="el-left" colspan='3'>Ванадий</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>As</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Мышьяк</td>
      </tr>
    </table>

    <td>
      <table class="table2">
        <tr>
          <td>8</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>O</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>15,994</td>
        </tr>
        <tr>
          <td class="ele" colspan='3'>Кислород</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>S</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>32,06</td>
        </tr>
        <tr>
          <td class="el" colspan='3'>Сера</td>
        </tr>

        <tr>
          <td class="letter-blue" rowspan='3'>Cr</td>
          <td rowspan='3'></td>
          <td>24</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>51,996</td>
        </tr>

        <tr>
          <td class="el-left " colspan='3'>Хром</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>Se</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>32,06</td>
        </tr>

        <td class="el" colspan='3'>Селен</td>



      </table>
    </td>


</table>

→ Ссылка
Автор решения: Qwertiy

Чтобы убрать дублирование границ у ячеек и самой таблицы, надо использовать

border-collapse: collapse;


table, tr, th, td {
  border: 1px solid;
  border-collapse: collapse;
}
<table>
  <tr><td>1<td>2<td>3<td>4<td>5</tr>
  <tr><td>1<td>2<td>3<td>4<td>5</tr>
  <tr><td>1<td>2<td>3<td>4<td>5</tr>
  <tr><td>1<td>2<td>3<td>4<td>5</tr>
</table>

Далее все версии содержат вёрстку из вопроса без изменений.

Если надо сделать для вложенных таблиц из вопроса все видимые линии одинарными, то это делается так:

table, tr, td {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

td td {
  border: 1px solid gray;
  padding: 8px;
}

td + td td:first-child {
  border-left: none;
}

td tr + tr td {
  border-top: none;
}


table, tr, td {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

td td
{
  border: 1px solid gray;
  padding: 8px;
  text-align: left;
}

td + td td:first-child {
  border-left: none;
}

td tr + tr td {
  border-top: none;
}

.el-left {
  text-align: left;
  text-transform: uppercase;
}

.el {
  text-align: right;
  text-transform: uppercase;
}

.ele {
  border: 1px solid gray;
  text-align: right;
  text-transform: uppercase;
}

.letter-red {
  font-size: 4rem;
  text-align: center;
  color: red;
}

.letter-blue {
  font-size: 4rem;
  text-align: center;
  color: blue;
}
<table class="table1">
  <td>
    <table class="table2">
      <tr>
        <td>7</td>
        <td class="emp" rowspan='3'></td>
        <td class="letter-red" rowspan='3'>N</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>14,067</td>
      </tr>
      <tr>
        <td class="ele" colspan='3'>Азот о</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>P</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Фосфор</td>
      </tr>

      <tr>
        <td class="letter-blue" rowspan='3'>V</td>
        <td rowspan='3'></td>
        <td>23</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>50,941</td>
      </tr>
      <tr>
        <td class="el-left" colspan='3'>Ванадий</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>As</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Мышьяк</td>
      </tr>
    </table>

    <td>
      <table class="table2">
        <tr>
          <td>8</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>O</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>15,994</td>
        </tr>
        <tr>
          <td class="ele" colspan='3'>Кислород</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>S</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>32,06</td>
        </tr>
        <tr>
          <td class="el" colspan='3'>Сера</td>
        </tr>

        <tr>
          <td class="letter-blue" rowspan='3'>Cr</td>
          <td rowspan='3'></td>
          <td>24</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>51,996</td>
        </tr>

        <tr>
          <td class="el-left " colspan='3'>Хром</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>Se</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>32,06</td>
        </tr>

        <td class="el" colspan='3'>Селен</td>



      </table>
    </td>


</table>

А если жирные линии надо оставить, то гораздо проще сделать это через раздельные границы (ещё надо удалить границу из стиля .ele):

table, tr, td {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

td td
{
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 8px;
  text-align: left;
}

td:first-child table {
  border-left: 3px solid gray;
  border-right: 1px solid gray;
}

td:last-child table {
  border-left: 1px solid gray;
  border-right: 2px solid gray;
}

td tr:first-child td {
  border-top: 3px solid gray;
}

td td[colspan="3"] {
  border-bottom: 3px solid gray;
}


table, tr, td {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

td td
{
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 8px;
  text-align: left;
}

td:first-child table {
  border-left: 3px solid gray;
  border-right: 1px solid gray;
}

td:last-child table {
  border-left: 1px solid gray;
  border-right: 2px solid gray;
}

td tr:first-child td {
  border-top: 3px solid gray;
}

td td[colspan="3"] {
  border-bottom: 3px solid gray;
}

.el-left {
  text-align: left;
  text-transform: uppercase;
}

.el {
  text-align: right;
  text-transform: uppercase;
}

.ele {
  /* border: 1px solid gray; */
  text-align: right;
  text-transform: uppercase;
}

.letter-red {
  font-size: 4rem;
  text-align: center;
  color: red;
}

.letter-blue {
  font-size: 4rem;
  text-align: center;
  color: blue;
}
<table class="table1">
  <td>
    <table class="table2">
      <tr>
        <td>7</td>
        <td class="emp" rowspan='3'></td>
        <td class="letter-red" rowspan='3'>N</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>14,067</td>
      </tr>
      <tr>
        <td class="ele" colspan='3'>Азот о</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>P</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Фосфор</td>
      </tr>

      <tr>
        <td class="letter-blue" rowspan='3'>V</td>
        <td rowspan='3'></td>
        <td>23</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>50,941</td>
      </tr>
      <tr>
        <td class="el-left" colspan='3'>Ванадий</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>As</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Мышьяк</td>
      </tr>
    </table>

    <td>
      <table class="table2">
        <tr>
          <td>8</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>O</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>15,994</td>
        </tr>
        <tr>
          <td class="ele" colspan='3'>Кислород</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>S</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>32,06</td>
        </tr>
        <tr>
          <td class="el" colspan='3'>Сера</td>
        </tr>

        <tr>
          <td class="letter-blue" rowspan='3'>Cr</td>
          <td rowspan='3'></td>
          <td>24</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>51,996</td>
        </tr>

        <tr>
          <td class="el-left " colspan='3'>Хром</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>Se</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>32,06</td>
        </tr>

        <td class="el" colspan='3'>Селен</td>



      </table>
    </td>


</table>

А если жирные линии должны быть не серыми, а чёрными, то можно так:

table, tr, td {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

td td {
  padding: 8px;
  text-align: left;
}

td:only-child:empty {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}

td:not(:only-child):empty {
  border-left: 1px solid gray;
  border-right: 1px solid gray;
}

td[colspan='3'] {
  border-top: 1px solid gray;
  border-bottom: 3px solid black;
}

td table {
  border-top: 3px solid black;
  border-right: 3px solid black;
}

td:first-child table {
  border-left: 3px solid black;
}

В сниппете поменял gray на silver для более наглядного результата.

table, tr, td {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  padding: 0;
}

td td {
  padding: 8px;
  text-align: left;
}

td:only-child:empty {
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
}

td:not(:only-child):empty {
  border-left: 1px solid silver;
  border-right: 1px solid silver;
}

td[colspan='3'] {
  border-top: 1px solid silver;
  border-bottom: 3px solid black;
}

td table {
  border-top: 3px solid black;
  border-right: 3px solid black;
}

td:first-child table {
  border-left: 3px solid black;
}

.el-left {
  text-align: left;
  text-transform: uppercase;
}

.el {
  text-align: right;
  text-transform: uppercase;
}

.ele {
  /* border: 1px solid gray; */
  text-align: right;
  text-transform: uppercase;
}

.letter-red {
  font-size: 4rem;
  text-align: center;
  color: red;
}

.letter-blue {
  font-size: 4rem;
  text-align: center;
  color: blue;
}
<table class="table1">
  <td>
    <table class="table2">
      <tr>
        <td>7</td>
        <td class="emp" rowspan='3'></td>
        <td class="letter-red" rowspan='3'>N</td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>14,067</td>
      </tr>
      <tr>
        <td class="ele" colspan='3'>Азот о</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>P</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Фосфор</td>
      </tr>

      <tr>
        <td class="letter-blue" rowspan='3'>V</td>
        <td rowspan='3'></td>
        <td>23</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>50,941</td>
      </tr>
      <tr>
        <td class="el-left" colspan='3'>Ванадий</td>
      </tr>

      <tr>
        <td>15</td>
        <td rowspan='3'></td>
        <td class="letter-red" rowspan='3'>As</td>
      </tr>

      <tr>
        <td></td>
      </tr>
      <tr>
        <td>30,973</td>
      </tr>
      <tr>
        <td class="el" colspan='3'>Мышьяк</td>
      </tr>
    </table>

    <td>
      <table class="table2">
        <tr>
          <td>8</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>O</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>15,994</td>
        </tr>
        <tr>
          <td class="ele" colspan='3'>Кислород</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>S</td>
        </tr>

        <tr>
          <td></td>
        </tr>
        <tr>
          <td>32,06</td>
        </tr>
        <tr>
          <td class="el" colspan='3'>Сера</td>
        </tr>

        <tr>
          <td class="letter-blue" rowspan='3'>Cr</td>
          <td rowspan='3'></td>
          <td>24</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>51,996</td>
        </tr>

        <tr>
          <td class="el-left " colspan='3'>Хром</td>
        </tr>

        <tr>
          <td>16</td>
          <td rowspan='3'></td>
          <td class="letter-red" rowspan='3'>Se</td>
        </tr>

        <tr>
          <td></td>
        </tr>

        <tr>
          <td>32,06</td>
        </tr>

        <td class="el" colspan='3'>Селен</td>



      </table>
    </td>


</table>

→ Ссылка
Автор решения: Qwertiy

Если поменять разметку, то можно сделать гораздо проще даже сохранив табличную вёрстку:

table {
  border-collapse: collapse;
}

table table {
  width: 100%;
}

td {
  border: 3px solid black;
  padding: 0;
}

td td {
  border: none;
  padding: 8px;
}

td:only-child:empty {
  border-block: 1px solid silver;
}

td[rowspan="3"]:empty {
  border-inline: 1px solid silver;
}

td[colspan='3']:not(:empty) {
  border-top: 1px solid silver;
  text-transform: uppercase;
  text-align: right;
}

.reverse td[colspan='3'] {
  text-align: left;
}

td[rowspan='3']:not(:empty) {
  font-size: 4rem;
  width: 3ch;
  text-align: center;
  color: blue;
}

td[rowspan='3']:not(:empty):last-child {
  color: red;
}
<table>
  <tr>
    <td><table>
      <tr><td>7<td rowspan='3'><td rowspan='3'>N</tr>
      <tr><td></tr>
      <tr><td>14,067</tr>
      <tr><td colspan='3'>Азот</tr>
    </table></td>
    <td><table>
      <tr><td>8<td rowspan='3'><td rowspan='3'>O</tr>
      <tr><td></tr>
      <tr><td>15,994</tr>
      <tr><td colspan='3'>Кислород</tr>
    </table></td>
  </tr><tr>
    <td><table>
      <tr><td>15<td rowspan='3'><td rowspan='3'>P</tr>
      <tr><td></tr>
      <tr><td>30,973</tr>
      <tr><td colspan='3'>Фосфор</tr>
    </table></td>
    <td><table>
      <tr><td>16<td rowspan='3'><td rowspan='3'>S</tr>
      <tr><td></tr>
      <tr><td>32,06</tr>
      <tr><td colspan='3'>Сера</tr>
    </table></td>
  </tr><tr>
    <td><table class="reverse">
      <tr><td rowspan='3'>V<td rowspan='3'><td>23</tr>
      <tr><td></tr>
      <tr><td>50,941</tr>
      <tr><td colspan='3'>Ванадий</tr>
    </table></td>
    <td><table class="reverse">
      <tr><td rowspan='3'>Cr<td rowspan='3'><td>24</tr>
      <tr><td></tr>
      <tr><td>51,996</tr>
      <tr><td colspan='3'>Хром</tr>
    </table></td>
  </tr><tr>
    <td><table>
      <tr><td>15<td rowspan='3'><td rowspan='3'>As</tr>
      <tr><td></tr>
      <tr><td>30,973</tr>
      <tr><td colspan='3'>Мышьяк</tr>
    </table></td>
    <td><table>
      <tr><td>16<td rowspan='3'><td rowspan='3'>Se</tr>
      <tr><td></tr>
      <tr><td>32,06</tr>
      <tr><td colspan='3'>Селен</td>
    </table></td>
  </tr>
</table>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.