diff --git a/js/server_variables.js b/js/server_variables.js
index c4b20921bc..f6fcc989bc 100644
--- a/js/server_variables.js
+++ b/js/server_variables.js
@@ -4,7 +4,7 @@
  * Unbind all event handlers before tearing down a page
  */
 AJAX.registerTeardown('server_variables.js', function() {
-    $('table.data tbody tr td:nth-child(2).editable').unbind('hover');
+    $('#serverVariables .variable_row').unbind('hover');
     $('#filterText').unbind('keyup');
 });
 
@@ -17,11 +17,12 @@ AJAX.registerOnload('server_variables.js', function() {
     $cancelLink = $('a.cancelLink');
 
     /* Variable editing */
-    $('table.data tbody tr td:nth-child(2).editable').hover(
+    $('#serverVariables .variable_row').hover(
         function() {
-            // Only add edit element if it is the global value, not session value and not when the element is being edited
-            if ($(this).parent().children('th').length > 0 && ! $(this).hasClass('edit')) {
-                $(this).prepend($editLink.clone().show());
+            var $elm = $(this).find('.variable_value');
+            // Only add edit element if the element is not being edited
+            if ($elm.hasClass('editable') && ! $elm.hasClass('edit')) {
+                $elm.prepend($editLink.clone().show());
             }
         },
         function() {
@@ -49,14 +50,12 @@ AJAX.registerOnload('server_variables.js', function() {
 
     /* Filters the rows by the user given regexp */
     function filterVariables() {
-        var mark_next = false, firstCell;
-        odd_row = false;
-
-        $('table.filteredData tbody tr').each(function() {
+        var mark_next = false, firstCell, odd_row = false;
+        $('#serverVariables .variable_row').not('.variable_header').each(function() {
             firstCell = $(this).children(':first');
-
             if (mark_next || textFilter == null || textFilter.exec(firstCell.text())) {
-                // If current global value is different from session value (=has class diffSession), then display that one too
+                // If current global value is different from session value
+                // (has class diffSession), then display that one too
                 mark_next = $(this).hasClass('diffSession') && ! mark_next;
 
                 odd_row = ! odd_row;
@@ -78,7 +77,7 @@ AJAX.registerOnload('server_variables.js', function() {
 /* Called by inline js. Allows the user to edit a server variable */
 function editVariable(link)
 {
-    var varName = $(link).parent().parent().find('th:first').first().text().replace(/ /g,'_');
+    var varName = $(link).closest('.variable_row').find('.variable_name').text().replace(/ /g,'_');
     var $mySaveLink = $saveLink.clone().show();
     var $myCancelLink = $cancelLink.clone().show();
     var $cell = $(link).parent();
@@ -98,10 +97,11 @@ function editVariable(link)
             }, function(data) {
                 if (data.success) {
                     $cell.html(data.variable);
+                    $cell.data('content', data.variable);
                     PMA_ajaxRemoveMessage($msgbox);
                 } else {
                     PMA_ajaxShowMessage(data.error, false);
-                    $cell.html($cell.find('span.oldContent').html());
+                    $cell.html($cell.data('content'));
                 }
                 $cell.removeClass('edit');
             }, 'json');
@@ -110,7 +110,7 @@ function editVariable(link)
     });
 
     $myCancelLink.click(function() {
-        $cell.html($cell.find('span.oldContent').html());
+        $cell.html($cell.data('content'));
         $cell.removeClass('edit');
         return false;
     });
@@ -121,18 +121,21 @@ function editVariable(link)
             varName: varName
         }, function(data) {
             if (data.success == true) {
-                // hide original content
-                $cell.html('<span class="oldContent" style="display:none;">' + $cell.html() + '</span>');
+                $cell.data('content', $cell.html()).html('');
+
                 // put edit field and save/cancel link
-                $cell.prepend('<table class="serverVariableEditTable" border="0"><tr><td></td><td style="width:100%;">' +
-                              '<input type="text" id="variableEditArea" value="' + data.message + '" /></td></tr></table>');
-                $cell.find('table td:first').append($mySaveLink);
-                $cell.find('table td:first').append(' ');
-                $cell.find('table td:first').append($myCancelLink);
+                $cell.prepend(
+                    '<table class="serverVariableEditTable" border="0">'
+                    + '<tr><td><input type="text" value="' + data.message + '" /></td>'
+                    + '<td></td></tr>'
+                    + '</table>'
+                );
+                $cell.find('table td:last').append($mySaveLink);
+                $cell.find('table td:last').append(' ');
+                $cell.find('table td:last').append($myCancelLink);
 
                 // Keyboard shortcuts to the rescue
-                $('input#variableEditArea').focus();
-                $('input#variableEditArea').keydown(function(event) {
+                $cell.find('input').focus().keydown(function(event) {
                     // Enter key
                     if (event.keyCode == 13) {
                         $mySaveLink.trigger('click');
diff --git a/server_variables.php b/server_variables.php
index 58977cd2bc..0777ddcf0d 100644
--- a/server_variables.php
+++ b/server_variables.php
@@ -123,7 +123,7 @@ $output = '<h2>' . PMA_Util::getImage('s_vars.png')
 /**
  * Link templates
  */
-$url = htmlspecialchars('server_variables.php?' . PMA_generate_common_url($db));
+$url = htmlspecialchars('server_variables.php?' . PMA_generate_common_url());
 $output .= '<a style="display: none;" href="#" class="editLink" onclick="return editVariable(this);">';
 $output .= PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>';
 $output .= '<a style="display: none;" href="' . $url . '" class="ajax saveLink">';
@@ -151,52 +151,61 @@ $output .= '<fieldset id="tableFilter">'
     . '</div>'
     . '</fieldset>';
 
-$output .= '<table id="serverVariables" class="data filteredData noclick">'
-    . '<thead>'
-    . '<tr><th>' .  __('Variable') . '</th>'
-    . '<th class="valueHeader">'
+$output .= '<div id="serverVariables" class="data filteredData noclick">'
+    . '<div class="variable_header variable_row">'
+    . '<div class="variable_name">' .  __('Variable') . '</div>'
+    . '<div class="variable_value valueHeader">'
     . __('Session value') . ' / ' . __('Global value')
-    . '</th>'
-    . '</tr>'
-    . '</thead>'
-    . '<tbody>';
+    . '</div>'
+    . '<div style="clear:both"></div>'
+    . '</div>';
 
 $odd_row = true;
 foreach ($serverVars as $name => $value) {
     $has_session_value = isset($serverVarsSession[$name])
         && $serverVarsSession[$name] != $value;
-    $row_class = ($odd_row ? 'odd' : 'even') . ' '
-        . ($has_session_value ? 'diffSession' : '');
+    $row_class = ($odd_row ? ' odd' : ' even')
+        . ($has_session_value ? ' diffSession' : '');
 
-    $output .= '<tr class="' . $row_class . '">'
-        . '<th class="nowrap">' . htmlspecialchars(str_replace('_', ' ', $name));
+    $output .= '<div class="variable_row ' . $row_class . '">'
+        . '<div class="variable_name">';
 
-        // To display variable documentation link
-        if (isset($VARIABLE_DOC_LINKS[$name])) {
-            $output .= PMA_Util::showMySQLDocu(
-                $VARIABLE_DOC_LINKS[$name][1],
-                $VARIABLE_DOC_LINKS[$name][1],
-                false,
-                $VARIABLE_DOC_LINKS[$name][2] . '_' . $VARIABLE_DOC_LINKS[$name][0]
-            );
-        }
-
-    $output .= '</th>'
-        . '<td class="value' . (PMA_isSuperuser() ? ' editable' : '') . '">'
+    // To display variable documentation link
+    if (isset($VARIABLE_DOC_LINKS[$name])) {
+        $output .= '<span title="' . htmlspecialchars(str_replace('_', ' ', $name)) . '">';
+        $output .= PMA_Util::showMySQLDocu(
+            $VARIABLE_DOC_LINKS[$name][1],
+            $VARIABLE_DOC_LINKS[$name][1],
+            false,
+            $VARIABLE_DOC_LINKS[$name][2] . '_' . $VARIABLE_DOC_LINKS[$name][0],
+            true
+        );
+        $output .= htmlspecialchars(str_replace('_', ' ', $name));
+        $output .= PMA_Util::getImage('b_help.png', __('Documentation'));
+        $output .= '</a>';
+        $output .= '</span>';
+    } else {
+        $output .= htmlspecialchars(str_replace('_', ' ', $name));
+    }
+    $output .= '</div>'
+        . '<div class="variable_value value' . (PMA_isSuperuser() ? ' editable' : '') . '">&nbsp;'
         . formatVariable($name, $value)
-        . '</td></tr>';
+        . '</div>'
+        . '<div style="clear:both"></div>'
+        . '</div>';
 
     if ($has_session_value) {
-        $output .= '<tr class="' . ($odd_row ? 'odd' : 'even') . '">'
-            . '<td>(' . __('Session value') . ')</td>'
-            . '<td class="value">' . formatVariable($name, $serverVarsSession[$name]) . '</td>'
-            . '</tr>';
+        $output .= '<div class="variable_row ' . ($odd_row ? ' odd' : ' even') . '">'
+            . '<div class="variable_name session">(' . __('Session value') . ')</div>'
+            . '<div class="variable_value value">&nbsp;' . formatVariable($name, $serverVarsSession[$name]) . '</div>'
+            . '<div class="variable_doc value"></div>'
+            . '<div style="clear:both"></div>'
+            . '</div>';
     }
 
     $odd_row = ! $odd_row;
 }
-$output .= '</tbody>'
-    . '</table>';
+$output .= '</div>';
 
 $response->addHtml($output);
 
diff --git a/themes/original/css/common.css.php b/themes/original/css/common.css.php
index 3b6f8eb6bd..1e621b9dad 100644
--- a/themes/original/css/common.css.php
+++ b/themes/original/css/common.css.php
@@ -1161,36 +1161,69 @@ div#logTable table {
 /* end serverstatus */
 
 /* server variables */
+#serverVariables {
+    min-width: 30em;
+}
+#serverVariables .variable_row > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
-a.editLink {
+#serverVariables .variable_header {
+    font-weight:        bold;
+    color:              <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+    background:         <?php echo $GLOBALS['cfg']['ThBackground']; ?>;
+}
+#serverVariables .variable_header .variable_value {
+    text-align: <?php echo $left; ?>;
+}
+#serverVariables .variable_row {
+    padding: 0.5em;
+    min-height: 18px;
+}
+#serverVariables .variable_name {
+    width: 45%;
+    float: <?php echo $left; ?>;
+    font-weight: bold;
+}
+#serverVariables .variable_name.session {
+    font-weight: normal;
+    font-style: italic;
+}
+#serverVariables .variable_value {
+    width: 50%;
+    float: <?php echo $right; ?>;
+    text-align: <?php echo $right; ?>;
+}
+
+/* server variables editor */
+#serverVariables .editLink {
+    padding-<?php echo $right; ?>: 1em;
     float: <?php echo $left; ?>;
     font-family: sans-serif;
 }
-
-table.serverVariableEditTable {
+#serverVariables .serverVariableEditTable {
     border: 0;
     margin: 0;
     padding: 0;
     width: 100%;
 }
-table.serverVariableEditTable td {
+#serverVariables .serverVariableEditTable td {
     border: 0;
     margin: 0;
     padding: 0;
-}
-table.serverVariableEditTable td:first-child {
     white-space: nowrap;
     vertical-align: middle;
+    text-align: <?php echo $left; ?>;
 }
-
-table.serverVariableEditTable input {
-    width: 95%;
+#serverVariables .serverVariableEditTable input {
+    width: 90%;
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
-
-table#serverVariables td {
-    height: 18px;
-}
-
 /* end server variables */
 
 /* querywindow */
@@ -2450,12 +2483,12 @@ body .ui-widget {
 }
 
 .jqplot-yaxis-tick.jqplot-breakTick {
-	right: -20px;
-	margin-right: 0px;
-	padding:1px 5px 1px 5px;
-/*	background-color: white;*/
-	z-index: 2;
-	font-size: 1.5em;
+    right: -20px;
+    margin-right: 0px;
+    padding:1px 5px 1px 5px;
+/*  background-color: white;*/
+    z-index: 2;
+    font-size: 1.5em;
 }
 
 .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
@@ -2642,6 +2675,6 @@ div.jqplot-bubble-label.jqplot-bubble-label-highlight {
 }
 
 div.jqplot-noData-container {
-	text-align: center;
-	background-color: rgba(96%, 96%, 96%, 0.3);
+    text-align: center;
+    background-color: rgba(96%, 96%, 96%, 0.3);
 }
diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php
index 8ff7e76876..c03bf394be 100644
--- a/themes/pmahomme/css/common.css.php
+++ b/themes/pmahomme/css/common.css.php
@@ -1429,36 +1429,74 @@ div#queryAnalyzerDialog table.queryNums {
 /* end serverstatus */
 
 /* server variables */
+#serverVariables {
+    min-width: 30em;
+}
+#serverVariables .variable_row > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+#serverVariables .variable_header {
+    color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+    background: #f3f3f3;
+    <?php echo $_SESSION['PMA_Theme']->getCssGradient('ffffff', 'cccccc'); ?>
+    font-weight: bold;
+}
+#serverVariables .variable_header .variable_value {
+    text-align: <?php echo $left; ?>;
+}
+#serverVariables .variable_row {
+    padding: 0.5em;
+    min-height: 18px;
+}
+#serverVariables .variable_name {
+    width: 45%;
+    float: <?php echo $left; ?>;
+    font-weight: bold;
+}
+#serverVariables .variable_name.session {
+    font-weight: normal;
+    font-style: italic;
+}
+#serverVariables .variable_value {
+    width: 50%;
+    float: <?php echo $right; ?>;
+    text-align: <?php echo $right; ?>;
+}
+#serverVariables .variable_doc {
+    overflow:visible;
+    float: <?php echo $right; ?>;
+}
 
-a.editLink {
+/* server variables editor */
+#serverVariables .editLink {
+    padding-<?php echo $right; ?>: 1em;
     float: <?php echo $left; ?>;
     font-family: sans-serif;
 }
-
-table.serverVariableEditTable {
+#serverVariables .serverVariableEditTable {
     border: 0;
     margin: 0;
     padding: 0;
     width: 100%;
 }
-table.serverVariableEditTable td {
+#serverVariables .serverVariableEditTable td {
     border: 0;
     margin: 0;
     padding: 0;
-}
-table.serverVariableEditTable td:first-child {
     white-space: nowrap;
     vertical-align: middle;
+    text-align: <?php echo $left; ?>;
 }
-
-table.serverVariableEditTable input {
-    width: 95%;
+#serverVariables .serverVariableEditTable input {
+    width: 90%;
+    margin: 0 0.5em;
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
-
-table#serverVariables td {
-    height: 18px;
-}
-
 /* end server variables */