Change from setting td border-top to border-bottom to cater for tables where scrollY is set

Change from setting td border-top to border-bottom to cater for tables where scrollY is set

AaronMAaronM Posts: 4Questions: 0Answers: 0
edited November 2014 in Free community support

The scenario; Table is created with scrollY set in the options. Lets say it's configured to always be at the bottom of the viewport. If the table has fewer rows than is necessary to fill the vertical content then the last row doesn't have border-bottom set.

Looking at the CSS the border-top is set in two places:

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #dddddd;
}
table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}

Changing both of these to instead use border-bottom causes the last table to row to have a bottom border and not appear 'unfinished' in the table.

(May need further consideration if table borders were disabled as then the top row wouldn't have a border-top.)

This discussion has been closed.