CODEWITHSUNDEEP
css
Pierre56
Pierre56

Reputation: 567

CSS table - separate rows with tiny line

This is what I am trying to achieve (Firebase dashboard). I would like to separate each row of my table with tiny lines.

enter image description here

I am using border: 1px solid rgb(212, 206, 206) for my table tr and the result is very different. My line separator between each rows is bigger. What should I do to make the border tinier?

enter image description here

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);
}

Upvotes: 0

Views: 68

Answers (3)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

My suggestion:

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>

Upvotes: 1

Hao Wu
Hao Wu

Reputation: 20699

Instead of assigning borde all around, you could just assign border-top so 1px will not actually looks like 2px:

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

Also If you want the table itself has some border as well, you can do it like this:

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);
}

Here's the full example:

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>

Upvotes: 2

Red
Red

Reputation: 3267

You are setting the border all round, but I think it's more of a trick of the eye. Try this to make it lighter in colour

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

Also, making the background gray won't make the border look so striking and thick

Upvotes: 2

Related Questions