CSS Добавление нижнего поля к <tr>, у которого есть цвет фона с границами - PullRequest
Новая
       18

CSS Добавление нижнего поля к <tr>, у которого есть цвет фона с границами

0 голосов
/ 20 июня 2019

Хочу, чтобы я после того, как я получил эту таблицу, где каждая строка имеет цвет фона с закругленными границами.Проблема, которую я получил, заключается в том, что мне нужно добавить нижнюю границу поля, так как на ней развалилась таблица.поэтому таблица выглядит следующим образом: 

<table>
 <tr>
   <td>stuff</td>
   <td>stuff2</td>
   <td>stuff3</td>
 </tr>
</table>

Тогда есть много этих строк, и для каждой строки я хочу определенный фон с закругленными границами, и до сих пор я справился.используя 

.colored-row td:first-child {
    border-top-left-radius: 1px;
}

.colored-row td:last-child {
    border-top-right-radius: 1px;
}

.colored-row td:first-child {
    border-bottom-left-radius: 1px;
}

.colored-row td:last-child {
    border-bottom-right-radius: 1px;
}

.colored-row {
    background: #374F60;
}

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

, поэтому я хочу, чтобы у него был такой запас для всей строки.Есть ли способ сделать это?

enter image description here

1 Ответ

0 голосов
/ 20 июня 2019

Вы не можете добавить margins к элементу tr.Единственный способ, который будет работать, - это если вы используете display:block на tr.Но это приведет к тому, что tr будет иметь ширину в соответствии с его содержимым, а не шириной таблицы.

Одним из решений было бы (если вы можете редактировать HTML) добавить строку separator междуваши цветные ряды и дать ему высоту. 

.colored-row td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.colored-row td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.colored-row {
  background: #374F60;
}

.separator {
  height: 10px;
}

table {
  border-collapse: collapse;
  width:100%;
}
<table>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
  <tr class="separator"></tr>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
</table>

РЕДАКТИРОВАТЬ: или, вы можете использовать border-spacing, но он работает только тогда, когда border-collapse установлен на separate.Но это добавит «пробел вверху» и в первый ряд 

.colored-row td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.colored-row td:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}

.colored-row {
  background: #374F60;
}

table {
  border-collapse: separate;
  border-spacing: 0 15px;
    width:100%;
}
<table>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
  <tr class="colored-row">
    <td>stuff</td>
    <td>stuff2</td>
    <td>stuff3</td>
  </tr>
</table>
...