Как я могу иметь границы вокруг строки таблицы, но не на каких-либо внутренних ячейках? - PullRequest
Новая
       4

Как я могу иметь границы вокруг строки таблицы, но не на каких-либо внутренних ячейках?

0 голосов
/ 31 октября 2018

Мне бы хотелось, чтобы таблица была такой, чтобы у меня было несколько строк, но нет внутренних вертикальных линий. Это подразумевает полную границу вокруг таблицы, но не внутренние границы столбца. В частности, я хотел бы иметь такую ​​возможность, но с интервалом вокруг каждой строки и изогнутых краев, как показано в следующем примере кода: https://jsfiddle.net/n14ye7nk/

body {
  font-family: sans-serif;
}

#table {
  border-spacing: 0.3em;
}

#table td {
  border: 2px solid #30c;
  border-radius: 0.4em;
  padding: 1em;
  text-align: center;
}

1 Ответ

0 голосов
/ 31 октября 2018

К сожалению, таблицы на самом деле не предназначены для того, чтобы делать то, что вы просите.

Чтобы граница вокруг строки, а не для ячейки, просто сдвиньте правило border на селектор #table tr, а также добавьте border-collapse: collapse к самому элементу <table>. 

body {
  font-family: sans-serif;
}

#table {
  border-collapse: collapse;
  border-spacing: 0.3em;
}

#table tr {
  border: 2px solid blue;
}

#table td {
  padding: 1em;
  text-align: center;
}
<table id="table">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

Межстрочный интервал таблицы может быть сделан с помощью border-collapse: separate ... хотя это не учитывает границы.

Обратите внимание, что ни один из подходов не позволит применить border-radius к tr. Лучший способ сделать это - просто установить отдельные угловые радиусы на элементах <td> :first-child и :last-child. Обратите внимание, что вы захотите cellspacing="0" на самом <table>. 

body {
  font-family: sans-serif;
}

#table td {
  padding: 1em;
  text-align: center;
}

#table tr:first-of-type td {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}

#table tr:last-of-type td {
  border-bottom: 2px solid blue;
}

#table tr:first-child td:first-child {
  border-left: 2px solid blue;
  border-top-left-radius: 10px;
}

#table tr:first-child td:last-child {
  border-right: 2px solid blue;
  border-top-right-radius: 10px;
}

#table tr:last-child td:first-child {
  border-left: 2px solid blue;
  border-bottom-left-radius: 10px;
}

#table tr:last-child td:last-child {
  border-right: 2px solid blue;
  border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>a table</td>
    </tr>
    <tr>
      <td>with</td>
      <td>rounded</td>
      <td>cells</td>
    </tr>
  </tbody>
</table>

Опять же, это не идеально.

Лучший способ справиться с этим - заменить таблицу на элементы <div>. Таким образом, вы можете использовать calc() в width, чтобы обеспечить равномерное расстояние, float: left, чтобы контролировать, сколько элементов в строке, и margin-bottom, чтобы добавить пробел между строками. Вам также нужно только применить ядро ​​border-radius на самом .row: 

.row {
  font-family: sans-serif;
  border: 2px solid blue;
  border-radius: 10px;
}

.row div {
  display: inline-block;
  text-align: center;
  padding: 1em;
  width: calc(100% / 3 - (3px + 2em));

}

.row:first-of-type {
  margin-bottom: 20px;
}
<div class="row">
  <div>this</div>
  <div>is</div>
  <div>a table</div>
</div>
<div class="row">
  <div>with</div>
  <div>rounded</div>
  <div>cells</div>
</div>
...