自定义最后 2 行的 HTML 表格

Question

我有一张 table :

HTML:

<table style="width:100%">
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>       
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        @foreach($draftOrderProducts as $draftOrderProduct)
            <tr>
                <td>{{ $draftOrderProduct['products_name'] }}</td>
                <td>{{ $draftOrderProduct['products_name'] }}</td>
                <td>{{ $draftOrderProduct['products_quantity'] }}</td>
                <td>${{ $draftOrderProduct['products_price'] }}</td>
                <td>${{ $draftOrderProduct['final_price'] }}</td>
            </tr>
        @endforeach
    </tbody>
    <tr>
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td><b>Grand Total<b></td>
    </tr>
    <tr>
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td></td> // empty bordered table data which I want to get rid of
        <td>${{ $grandTotal }}}</td>
    </tr>
</table>

CSS:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
ul {
    list-style-type: none;
}

如您所见，我正在使用空的 td 来“几乎”实现我的目标。我的目标是最后两行，其中 2 个 td 对齐到总计的右侧。然而，我宁愿在他们的左边没有空边框的 td(但需要保持“总计”td 的右对齐。

Answer 1

您无法摆脱所有空的td's，您至少需要使用一个。只需使用 colspan 。试试这个，这是最接近你想要达到的目标的匹配:

<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>

如果您仍想删除多余的 td 周围的边框，不幸的是没有干净的方法。但是您可以通过 CSS 技巧来实现它。试试这个:

<table>
    <thead>
        <tr>
            <th>Code</th>
            <th>Name</th>       
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
        </tr>
       </thead>
       <tbody>
            @foreach($draftOrderProducts as $draftOrderProduct)
            <tr>
                <td>{{ $draftOrderProduct['products_name'] }}</td>
                <td>{{ $draftOrderProduct['products_name'] }}</td>
                <td>{{ $draftOrderProduct['products_quantity'] }}</td>
                <td>${{ $draftOrderProduct['products_price'] }}</td>
                <td>${{ $draftOrderProduct['final_price'] }}</td>
            </tr>
            @endforeach
       </tbody>
       <tfoot>
        <tr>
            <td class="final" colspan="4"></td> 
            <td><b>Grand Total</b></td>
        </tr>
        <tr>
            <td class="final" colspan="4"></td> 
            <td>${{ $grandTotal }}}</td>
        </tr>
    </tfoot>
</table>

并使用 CSS:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
}
.final{
    border: 1px solid transparent;
    border-right: 1px solid black;
}
ul {
    list-style-type: none;
}

Demo