Question

我有一张桌子：

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＆＃34;几乎＆＃34;实现我的目标。我的目标是最后有2行，其中2 td＆＃右边对齐。我宁愿在他们的左边没有空的边界td＆＃（但需要保持＆＃34;总计＆＃34; td＆＃39; s的正确对齐。

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

Answer 2

表格有点痛苦。 colspan 可能是你最好的选择。

<tr>
    <td colspan="4"></td> 
    <td><b>Grand Total<b></td>
</tr>
<tr>
    <td colspan="4"></td> 
    <td>${{ $grandTotal }}}</td>
</tr>

编辑：就造型表而言，他们非常顽固，你需要一些css魔法才能在边境方面获得理想的结果。

这应该可以实现您的目标：

<style>
table { 
   width: 100%;
}
td {
    border: 3px solid #000;
}
tfoot td:first-child {
    border: none !important;
}
</style>

<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>foo</td>
                <td>bar</td>
                <td>car</td>
                <td>sa</td>
                <td>bla</td>
            </tr>
        @endforeach
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4"></td> 
            <td><b>Grand Total</b></td>
        </tr>
        <tr>
            <td colspan="4"></td> 
            <td>${{ $grandTotal }}}</td>
        </tr>
    </tfoot>
</table>

Answer 3

设置colspan元素的td属性。在这种情况下<td colspan='5'>sample text</td>。然后你可以对齐或浮动。

替换：

<td><b>Grand Total<b></td>

使用：

<td colspan='5'><b>Grand Total<b></td>

HTML表自定义最后2行

3 个答案: