Enforce width of "Player" column

bstrie · Aug 15, 2012 · ca0df46 · ca0df46
1 parent d057af4
commit ca0df46
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/playerstatus.css b/playerstatus.css
@@ -41,9 +41,9 @@ div#playerstatus table.tablesorter thead tr th,
 div#playerstatus table.tablesorter tfoot tr th {
   background-color: #B4B4B4;
   font-weight: normal;
-  padding: 4px 0px 4px 3px;
+  padding: 4px 3px;
 }
-div#playerstatus table.tablesorter thead tr .header {
+div#playerstatus table.tablesorter thead tr th.header {
   background-image: url(bg.gif);
   background-repeat: no-repeat;
   background-position: center right;
@@ -75,14 +75,14 @@ div#playerstatus table.tablesorter tbody td a:visited {
   color: #B4B4B4;
   text-decoration: none;
 }
-div#playerstatus table.tablesorter thead tr .headerSortUp {
+div#playerstatus table.tablesorter thead tr th.headerSortUp {
   background-image: url(asc.gif);
 }
-div#playerstatus table.tablesorter thead tr .headerSortDown {
+div#playerstatus table.tablesorter thead tr th.headerSortDown {
   background-image: url(desc.gif);
 }
-div#playerstatus table.tablesorter thead tr .headerSortDown,
-div#playerstatus table.tablesorter thead tr .headerSortUp {
+div#playerstatus table.tablesorter thead tr th.headerSortDown,
+div#playerstatus table.tablesorter thead tr th.headerSortUp {
   background-color: #DCDCDC;
 }
 div#playerstatus table.tablesorter thead tr th:hover {

diff --git a/playerstatus.js b/playerstatus.js
@@ -1,4 +1,3 @@
-// TODO: enforce a minimum width on each column via padding &nbsp; in th
 playerstatus = (function() {
 
 // Each target here is passed to fetch.php to perform our cross-domain requests
@@ -85,7 +84,11 @@ function drawTable(data) {
                     '</span>' +
                     '<table id="statustable" class="tablesorter">' +
                       '<thead><tr>' +
-                        '<th>Player</th>' +
+                        '<th>' +
+                          'Player' +  // Keep column at max character length
+                          // Equivalent to `"mystring" * mynumber` in Python
+                          Array(MAX_NAME_LEN-7).join('&nbsp;') +
+                        '</th>' +
                         '<th>Ver</th>' +
                         '<th>Game</th>' +
                         '<th>XL</th>' +
@@ -127,9 +130,8 @@ function drawTable(data) {
 
     $('#playerstatus').html(tablehtml);
 
-    // Need to make sure there's room for the sort icons.
-    // Kludgy, but the best way to ensure a certain width for each th,
-    // since width in ex/em is insufficient and px will vary by font.
+    // Append two &nbsp; to each th, to make sure there's room for the icons.
+    // Kludgy, but it works well.
     $('#statustable th').each(function() {
         $(this).text($(this).text() + '\u00A0\u00A0')  // \u00A0 = &nbsp;
     });