HTML table customizing last 2 rows - html

Question

I have a 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;
}
As you can see, I am using empty td's to "almost" achieve my goal. My goal is to have 2 last rows, with 2 td's aligned to the right for the grand total. I would prefer not having empty bordered td's on their left however (but need to keep the right alignement of the "grand total" td's.

Answer 1

You can't get rid of all empty td's you need to use atleast one. Just use colspan . try this which is the closest match for what you're looking to achieve:
<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>
If you still want to remove the border around the border around the extra td, unfortunately there isn't a clean way. But you can achieve it by a CSS trick. try this:
<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>
And use the 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

Tables are a bit painful. colspan is probably your best bet here.
<tr>
<td colspan="4"></td>
<td><b>Grand Total<b></td>
</tr>
<tr>
<td colspan="4"></td>
<td>${{ $grandTotal }}}</td>
</tr>
EDIT: As far as styling tables goes they're pretty damn stubborn and you will need some css magic to get the desired outcome here in regards to borders.
This should acheive what you're after:
<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

Set the colspan attribute for the td element. In this case <td colspan='5'>sample text</td>. Then you can align or float right.
Replace:
<td><b>Grand Total<b></td>
With:
<td colspan='5'><b>Grand Total<b></td>