Таблица не разрабатывается должным образом

Question

У меня есть стол, который я пытаюсь стилизовать. Я хотел иметь bottom-border под thead и каждым tr, но независимо от того, что я положил, это просто не будет применяться. Я даже пытался установить цвет для thead, но это тоже не дало бы. Есть идеи, что я делаю не так?

.border-bottom {
    	border-collapse: collapse;
    	border-bottom: 2px solid #CCD5DE;
    }

    table {
    	width: 100%;
    	max-height: 500px;
    	overflow: scroll;
    }
    
    thead {
    	color: red;
    }
    
    th {
    	font-weight: 700;
    	font-size: 20px;
    	letter-spacing: 1px;
    	text-align: left;
    	
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    
    td {
    	font-weight: 400;
    	font-size: 18px;
    	letter-spacing: .75px;
    	text-align: left;
    	
    	padding-top: 20px;
    	padding-bottom: 20px;
    }

<div class="spaced-div">
  <table>
    <thead class="bottom-border">
      <tr>
        <th>Date</th>
        <th>Stock</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Fees</th>
        <th>Subtotal</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-bottom">
        <td>March 21, 2020</td>
        <td>DMC</td>
        <td>1,330</td>
        <td>5.71</td>
        <td>23.54</td>
        <td>7,617.84</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

Здесь есть две основные проблемы:

1) Css свойство border-collapse: collapse; должно быть под table, например,

table {
    width: 100%;
    max-height: 500px;
    overflow: scroll;
    border-collapse: collapse;
}

2) Убедитесь, что у вас одинаковое имя класса .border-bottom для thead и tbody tr.

.border-bottom {
    border-bottom: 2px solid #CCD5DE;
}

table {
    width: 100%;
    max-height: 500px;
    overflow: scroll;
    border-collapse: collapse;
}

thead {
    color: red;
}

th {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: left;

    padding-top: 20px;
    padding-bottom: 20px;
}

td {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .75px;
    text-align: left;

    padding-top: 20px;
    padding-bottom: 20px;
}

<div class="spaced-div">
    <table>
      <thead>
        <tr class="border-bottom">
          <th>Date</th>
          <th>Stock</th>
          <th>Quantity</th>
          <th>Price</th>
          <th>Fees</th>
          <th>Subtotal</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-bottom">
          <td>March 21, 2020</td>
          <td>DMC</td>
          <td>1,330</td>
          <td>5.71</td>
          <td>23.54</td>
          <td>7,617.84</td>
        </tr>
      </tbody>
   </table>
</div>