表格样式不正确

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 {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-height: 500px;&nbsp; &nbsp; overflow: scroll;&nbsp; &nbsp; border-collapse: collapse;}2)确保和具有相同的类名.border-bottom。theadtbody tr.border-bottom {&nbsp; &nbsp; border-bottom: 2px solid #CCD5DE;}table {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-height: 500px;&nbsp; &nbsp; overflow: scroll;&nbsp; &nbsp; border-collapse: collapse;}thead {&nbsp; &nbsp; color: red;}th {&nbsp; &nbsp; font-weight: 700;&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; padding-top: 20px;&nbsp; &nbsp; padding-bottom: 20px;}td {&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; letter-spacing: .75px;&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; padding-top: 20px;&nbsp; &nbsp; padding-bottom: 20px;}<div class="spaced-div">&nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Stock</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Quantity</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Fees</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Subtotal</th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr class="border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>March 21, 2020</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>DMC</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>1,330</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>5.71</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>23.54</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>7,617.84</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp;</table></div>