I've tried styling a classic report so that the cells have dotted borders. For some reason, I'm getting two extra empty rows at the bottom of the report and also one extra row at the top when I use a top table border. I tried hiding the first td element using javascript, thinking it would completely collapse the first row, which seems to just appear with no data, but that did not work.
The CSS I'm currently using is below. This does not have any table borders, but I still get the two extra rows at the bottom of the table. The query only returns rows with the expected data i.e. when you run the query in SQL Workshop, you get the expected number of rows, without the three extra rows,so I'm wondering if this has to do with how Apex nests html tables in Classic Reports and how I might solve this. We need this to look good as we're using this to print important documents by printing the webpage and when saved as a PDF, it appears as one heavy bottom border.
Also, is there a way to add left and right cell borders to the first column and last columns only, respectively. I want to avoid using table borders, unless there is a way to remove the empty first row that always appear in the classic report
table #report_data {width:100%;
}
table #report_data th {
border-top: 1px dotted #000 !important;
border-left:none !important;
border-right: 1px dotted #000 !important;
border-bottom: 1px dotted #000 !important;
border-collapse: collapse !important;
}
table #report_data th:first-child {
border-left: 1px dotted #000 !important
}
table #report_data th:last-child {
border-right: none !important;
}
table #report_data td {
border-left:none !important;
border-right:1px dotted #000 !important;
border-bottom:1px dotted #000 !important;
}
table .standardLook td:first-child {
border-left: none !important;
border-bottom: none !important;
border-right: none !important;
border-top: none !important;
}
table #report_data td:last-child {
border-right: none !important;
}
table #report_data td:first-child {
border-left: none !important;
}
table #report_data td:last-child {
border-right: none !important;
}