Question

我有一个非常类似于小提琴中找到的相同代码的表：

 <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>之前插入<td>，则对齐方式会丢失（例如，位置从1位数变为2位数9-10）。

有人可以很好地解决我的问题吗？

Answer 1

您可能想尝试行跨。 https://www.w3schools.com/tags/att_td_rowspan.asp

Answer 2

您好，我通过执行克里斯托弗·本内特（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;
}

将margin-bottom添加到border-collaps表

2 个答案: