Use consistent & healthy padding for table headers, even when sorting

Without this, as soon as a column is sorted, extra padding is added and
all table contents get shifted a few pixels downwards in a rather jerky
fashion - this is difficult to capture in screenshots. Also, text in
table headers becomes misaligned.

By using sorting symbols that have the same height, sorting columns
asc/desc doesn't make the content in table headers "jump" and remain
misaligned.
This commit is contained in:
Gerhard Lazu 2018-02-06 22:20:30 +00:00
parent ea602e48cb
commit 6f622f3f44
2 changed files with 5 additions and 6 deletions

View File

@ -92,9 +92,8 @@ table.legend td { padding: 4px 0 4px 10px; width: 130px; }
input#truncate { width: 50px; text-align: right; }
table { border-collapse: collapse; }
table th { font-weight: normal; color: black; }
table th, table td { font: 12px Verdana, sans-serif; padding: 2px 4px; }
table th { font-weight: normal; color: black; padding: 6px 5px 5px 5px; line-height: 1em; }
table td { padding: 2px 5px; }
table.list th, table.list td { vertical-align: top; min-width: 5em; width: auto; }
table.list { border-width: 1px; margin-bottom: 1em; }
@ -173,7 +172,7 @@ tr.alt2>td {
td span,
td abbr {
display: inline-block;
padding: 3px 5px;
padding: 2px 4px;
margin: 0 0 3px 0;
}
@ -322,7 +321,7 @@ input[type=submit][disabled]:hover, button[disabled]:hover, a.button.disabled {
h3 { padding: 0 0 2px 0; margin: 1em 0 1em 0; font-size: 1em; border-bottom: 1px solid #E4E4E4; font-weight: normal; }
abbr { background: #99EBFF; padding: 3px 5px; border-radius: 5px; -moz-border-radius: 5px; border: none; cursor: default; text-decoration: none; }
abbr { background: #99EBFF; padding: 2px 4px; border-radius: 5px; -moz-border-radius: 5px; border: none; cursor: default; text-decoration: none; }
table.list td abbr a { display: inline; width: auto; }

View File

@ -835,7 +835,7 @@ function fmt_sort(display, sort) {
var prefix = '';
if (current_sort == sort) {
prefix = '<span class="arrow">' +
(current_sort_reverse ? '&#9660; ' : '&#9650; ') +
(current_sort_reverse ? '&#9661; ' : '&#9651; ') +
'</span>';
}
return '<a class="sort" sort="' + sort + '">' + prefix + display + '</a>';