表格样式不正确

Question

我有一张桌子正在尝试设计样式。我想在每个bottom-border下面都有一个，但无论我放什么，它都不适用。我什至尝试设置颜色，但这也没有给出。有什么想法我做错了吗？theadtrthead.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。theadtbody 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>