Question

我需要在下表中的最后一个tr之间提供一个空格，以便感觉像另一个块。行在循环中生成。有什么想法吗？

<table>
    <tr>
        <td>0</td>
        <td>text1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>text2</td>
    </tr>
    <tr class="last" style="border-top: 5px solid blue;">
        <td>3</td>
        <td>text3</td>
    </tr>
</table>

Answer 1

我认为唯一的方法是在上一个<tr>之前提供一个空的<tr>，如下所示......

＆＃13;

   <table>
    <tr>
        <td>0</td>
        <td>text1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>text2</td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr class="last" style="border-top: 5px solid blue;">
        <td>3</td>
        <td>text3</td>
    </tr>
    </table>

＆＃13;

Answer 2

您可以使用css

Table:last-child {
   padding-top: 8px; /* fill in your value */
 }

Answer 3

是的，您可以添加填充/边距，只需尝试两者并检查

<table>
    <tr>
        <td>0</td>
        <td>text1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>text2</td>
    </tr>
    <tr class="last" style="border-top: 5px solid blue;">
        <td>3</td>
        <td>text3</td>
    </tr>
</table>

在css文件中

.last {

    padding-top: 5px;
   }

或者您可以给予保证金

 .last {

    margin-top: 5px;
   }

您可以选择上述方法中的任何一种，既可以添加填充，也可以添加边距:)试试这个

Answer 4

您可以使用css伪元素。

<style>
    .table-class tr:last-child {
        padding:10px; // your value.
    }
</style>

表格中最后两行之间的空格

4 个答案: