将边距底部添加到边框折叠表

debugcn 发表于 Dev

约翰·琼森

我有一个与小提琴中的相同代码非常相似的表：

 <table id="table">
    <tbody class="table-body">
    <tr class="table-row">
      <td class="table-data cell-counter">1</td>
      <td class="table-data cell-description">HelloHello</td>
    </tr>
    <tr class="table-row">
      <td class="table-data cell-counter">2</td>
      <td class="table-data cell-description">HelloHello</td>
    </tr>
    <tr class="table-row">
      <td class="table-data cell-counter">3</td>
      <td class="table-data cell-description">HelloHello</td>
    </tr>
    <tr class="table-row">
      <td class="table-data cell-counter">10</td>
      <td class="table-data cell-description">HelloHello</td>
    </tr>
    <tr class="table-row">
      <td class="table-data cell-counter">11</td>
      <td class="table-data cell-description">HelloHello</td>
    </tr>
    </tbody>
    </table>

    <style>
    #table {
      width: 100%;
        color: black;
        border-collapse:collapse;
    }

    .table-row td:nth-child(1),
    .table-row th:nth-child(1) {
        width: 5%;
        text-align: left;
        padding-left: 5px;
        padding-right: 5px;
        vertical-align: middle;
    }

    .table-row td:nth-child(2),
    .table-row th:nth-child(2) {
        text-align: center;
    }

    .table-body tr:nth-child(2n + 4) {
        background-color: rgba(0, 0, 0, 0.4);
    }
    .table-body tr:nth-child(2n + 5) {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .cell-counter {
        word-wrap: break-word;
      font-weight: bold;
        font-size: $larger-font-size;
    }

    .cell-description {
        margin: 0;
    }

https://jsfiddle.net/0xkvz2p1/18/

对于前 3 个地方，我想要一个，margin-bottom以便行之间有一点空间。

但是，由于我必须border-collapse使行具有正确的颜色，而之间没有任何空间<td>，因此边距没有任何影响。如果我在<div>之前插入 a <td>，对齐将丢失（例如，位置从 1 位数字变为 2 位数字 9-10）。

有没有人对我的问题有很好的解决方案？

约翰·琼森

您好，我通过执行 Christopher Bennett 在评论中提到的方式解决了这个问题。

我只是把一个<div>顶部3（彩色）内<td>，并把着色的<div>，然后margin-bottom对<div>

像这样

<tr>
 <td>1</td>
 <td>
    <div className="table-row-margin">
       <span>HelloHello</span>
    </div>
 </td>
</tr>

和 css

.table-row-margin {
    display: block;
    margin-bottom: 0.5%;
}

.table-body tr:first-child td:nth-child(2) div:first-child {
    background-color: #FFF45E;
}

.table-body tr:nth-child(2) td:nth-child(2) div:first-child {
    background-color: #DCDCDC;
}

.table-body tr:nth-child(3) td:nth-child(2) div:first-child {
    background-color: #FFC933;
}
.table-body tr:first-child td:nth-child(2) div:first-child,
.table-body tr:nth-child(2) td:nth-child(2) div:first-child,
.table-body tr:nth-child(3) td:nth-child(2) div:first-child {
    border-radius: 10px;
    color: black;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。