Граничные вопросы на HTML Таблица - PullRequest
Новая
       13

Граничные вопросы на HTML Таблица

0 голосов
/ 05 марта 2020

У меня есть таблица, в которой мне не нужна внутренняя граница, кроме той, которая отделяет заголовок от строк.

В моем css у меня есть: 

table { ...
    border-width: 2px;
    border-color: #ddd;
    border-style: solid;
}
table th {
  border-collapse: collapse;
  border-bottom: 2pt solid #830504;
  padding: 4px  8px ;
  text-align: center;
}
table tr {
  padding:4px;
}

table td {
  border-collapse: none;
  padding:4px;
}

И я получаю следующее

enter image description here

Как мне избавиться от этих 2 пробелов справа и слева от нижней границы?

enter image description here

Ответы [ 4 ]

1 голос
/ 05 марта 2020

Проблема, вероятно, связана с тем, что вы используете border-collapse на td и th, но не на table.

Вот разница: 

.collapse {
  border-collapse: collapse
}

table {
  border: 1px solid black;
}

th {
  border-bottom: 1px solid black;
}
<table>
  <thead>
    <tr>
      <th>Head</th>
      <th>Header</th>
      <th>Bob</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </tbody>
</table>

<table class="collapse">
  <thead>
    <tr>
      <th>Head</th>
      <th>Header</th>
      <th>Bob</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
    <tr>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
      <td>Lorem Ipsum</td>
    </tr>
  </tbody>
</table>
0 голосов
/ 05 марта 2020

Сброс border-spacing со значением по умолчанию c .2px.

Если установить значение 0, проблема будет решена. 

table {
  border-width: 2px;
  border-color: #ddd;
  border-style: solid;
  margin: 1em auto;
  border-spacing: 0;
  /* this */
}

table th {
  border-collapse: collapse;
  border-bottom: 10pt solid #830504;
  padding: 8px;
  text-align: center;
}

table tr {
  padding: 8px;
}

table td {
  padding: 4px;
  border-collapse: none;
}
<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table>
0 голосов
/ 05 марта 2020

используя CSS, который вы предоставили, просто добавьте border-spacing: 0; к вашему стилю таблицы 

table {
            border-width: 2px;
            border-color: #ddd;
            border-style: solid;
            border-spacing: 0;

        }

Вы можете просмотреть его, работая здесь https://jsfiddle.net/hd60zset/3/

0 голосов
/ 05 марта 2020

Используйте это как минимальное основание c таблица css

.tbl {
  width: 100%; /* you may change the width in % */
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: auto;
}
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0;
  background-color: transparent;
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  hyphens: auto;
  white-space: normal;
}
@media (max-width: 767.9px) {
  table {
    border: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

С этим html

<div class="tbl">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 11</td>
        <td>Data 12</td>
      </tr>
      <tr>
        <td>Data 21</td>
        <td>Data 22</td>
      </tr>
    </tbody>
  </table>
</div>

С этим css ваша таблица реагирует на Все размеры экрана, и вам нужно только дать некоторые цвета и / или границы для th и td

...