Таблица CSS - отдельные строки с крошечной строкой

#css

Вопрос:

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

Я использую border: 1px solid rgb(212, 206, 206) для своей таблицы tr, и результат сильно отличается. Мой разделитель строк между строками больше. Что я должен сделать, чтобы сделать границу мельче?

dashboard.js

   <table>
    <tr>
      <th>Email</th>
      <th>Registration Date</th>
      <th>Status</th>
      <th>Other</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

dashboard.css

 .dashboard-content table{
  width: 100%;
  border-collapse: collapse;

}


table tr{ 
  border: 1px solid rgb(212, 206, 206);
}

Ответ №1:

Вместо того, чтобы назначать borde повсюду, вы могли бы просто назначить border-top so 1px , который на самом деле не будет выглядеть как 2px:

 table tr { 
    border-top: 1px solid rgba(212, 206, 206, 0.5);
}

Также, если вы хотите, чтобы сама таблица также имела некоторую границу, вы можете сделать это следующим образом:

 table {
    border: 1px solid rgba(212, 206, 206, 0.5);
}

table tr:not(:first-child) { 
    border-top: 1px solid rgba(212, 206, 206, 0.5);
}

Вот полный пример:

Показать фрагмент кода

 table {
    border-collapse: collapse;
    border: 1px solid rgba(212, 206, 206, 0.5);
    width: 100%;
    text-align: center;
}

table tr:not(:first-child) { 
    border: 1px solid rgba(212, 206, 206, 0.5);
}

/* for decoration */
table tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.01);
}

 <table>
  <tr>
    <th>Email</th>
    <th>Registration Date</th>
    <th>Status</th>
    <th>Other</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Ross</td>
    <td>70</td>
    <td></td>
  </tr>
</table>

1. Удивительно, что это сработало. Я только что изменил свой border-collapse с collapse на separate в моем .table с помощью a border-spacing:0 25px; . Теперь нижняя граница исчезла на моем столе, есть идеи, как это исправить?

2. Мое предложение — сохранить значение border-collapse to collapse и назначить некоторые вертикальные отступы для tr like tr { padding: 25px 0; }

Ответ №2:

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

 table tr{ 
    border: 1px solid rgba(212, 206, 206, 0.5);
}

Кроме того, если сделать фон серым, граница не будет выглядеть такой яркой и толстой

1. Удивительно, что это сработало. Я только что изменил свой border-collapse с collapse на separate в моем .table с помощью a border-spacing:0 25px; . Теперь нижняя граница исчезла на моем столе, есть идеи, как это исправить?

Ответ №3:

Мое предложение:

 table {
  width: 100%;
  border-collapse: collapse;
}

table tr {
  border-bottom: 1px solid rgb(212, 206, 206);
  text-align: center;
}

tr:nth-child(odd) {
  background-color: rgb(238,238,238);
}

table th,
table td {
  padding: 5px;
}

 <table>
  <tr>
    <th>Email</th>
    <th>Registration Date</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>21</td>
  </tr>
</table>