Recently I noticed something weird on our development server (v2025-2.3) when working on some templates. I have a table on this document with some columns with information in it. For styling I have a single border around the table and the cells itself do not have a border (except for the header cells that have a filled color and a border on the outside).
In some cases I get a double border at the bottom, so the bottom border of the table and then also a bottom border of the cells.
I have searched online for a solution but it does not work in all cases. I use a function that creates a table for me dynamically with all the correct number of rows and columns and all the classes. The result is something like:
<table id="LO_Tbl_1" class="tableStyle LO_Orders" data-column-resize="" data-detail="ORDER" data-hide-when-empty="" data-expander="2019" title="ORDER">
<thead class="tableTitleRowLO">
<tr class="tableTitleRow">
<th data-translate="" class="tableTitleCol tbl1HdrLO_Col1">Tank Container</th>
<th data-translate="" class="tableTitleCol tbl1HdrLO_Col2">Trade Name</th>
<th data-translate="" class="tableTitleCol tbl1HdrLO_Col3">DG Description</th>
<th data-translate="" class="tableTitleCol tbl1HdrLO_Col4">IHS Code</th>
</tr>
</thead>
<tbody class="tableDataRowLO">
<tr class="pagination tableDataRow tblrow1" data-repeat="jobs" data-breakable="0">
<td class="tableDataCol tbl1DtlLO_Col1 dynamic pagination">@LO1_Col1@</td>
<td class="tableDataCol tbl1DtlLO_Col2 dynamic pagination">@LO1_Col2@</td>
<td class="tableDataCol tbl1DtlLO_Col3 dynamic pagination">@LO1_Col3@</td>
<td class="tableDataCol tbl1DtlLO_Col4 dynamic pagination">@LO1_Col4@</td>
</tr>
<tr class="pagination tableDataRow tblrow2 lastrow" data-repeat="jobs" data-breakable="1">
<td class="tableDataCol tbl1DtlLO_Col1 dynamic pagination">@LO1_Col1@</td>
<td class="tableDataCol tbl1DtlLO_Col2 dynamic pagination">@LO1_Col2@</td>
<td class="tableDataCol tbl1DtlLO_Col3 dynamic pagination">@LO1_Col3@</td>
<td class="tableDataCol tbl1DtlLO_Col4 dynamic pagination">@LO1_Col4@</td>
</tr>
</tbody>
<tfoot class="tbl2FootVBR">
<tr data-showin="break">
<td class="dummy dynamic" colspan="4" data-translate=""/>
</tr>
</tfoot>
</table>
You will probably notice I have a separate class on the last row call “lastrow”. This lets me target the last row so that I can add a left + right + bottom border on the last row on td level. For the other rows I add a left border on the first cell and a right border on the last cell per row. This way I avoid having a border on the table itself and this should in theory (together with the right collapse) avoid the issue with the double bottom border. Unfortunately this does not work in all cases.
So, I have this scss:
/* Necessary to fix a bug where the bottom border of the last row for a table is not shown due to a Gecko engine issue */
.lastrow {
border-left: 1px solid $GreenDark;
border-right: 1px solid $GreenDark;
border-bottom: 1px solid $GreenDark;
}
.lastrow > td:first-child {
border-left: 1px solid $GreenDark;
}
.lastrow > td:last-child {
border-right: 1px solid $GreenDark;
}
.tableStyle {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
This is a sample of that table (alignment of the titles is not correct but does not affect the issue I am having):
Is there a way to work around this that will work, other than upgrading to the new version that I will do eventually?
