diff --git a/app/js/controllers/table.editor.js b/app/js/controllers/table.editor.js
index 4b53899..3e13331 100644
--- a/app/js/controllers/table.editor.js
+++ b/app/js/controllers/table.editor.js
@@ -29,6 +29,7 @@
     $scope.model.config.tableStyles = parseStyleConfig($scope.model.config.tableStyles);
     $scope.model.config.columnStyles = parseStyleConfig($scope.model.config.columnStyles);
     $scope.model.config.rowStyles = parseStyleConfig($scope.model.config.rowStyles);
+    $scope.model.config.multiLineInputs = $scope.model.config.multiLineInputs === "1" ? true : false;
  
     //console.log($scope.model.value);
 
@@ -111,8 +112,41 @@
         axis: 'y',
         cursor: "move",
         handle: ".handle",
-        update: function (ev, ui) {
+        cancel: '.no-drag',
+        containment: 'parent',
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        items: '> tr:not(.unsortable)',
+        tolerance: 'pointer',
+        helper: function (e, ui) {
+            // When sorting table rows, the cells collapse. This helper fixes that: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/
+            ui.children().each(function () {
+                //$(this).height($(this).height());
+                $(this).width($(this).width());
+            });
+            return ui;
+        },
+        start: function (e, ui) {
+            //ui.placeholder.html("<td colspan='5'></td>");
+
+            // Build a placeholder cell that spans all the cells in the row: http://stackoverflow.com/questions/25845310/jquery-ui-sortable-and-table-cell-size
+            var cellCount = 0;
+            $('td, th', ui.helper).each(function () {
+                // For each td or th try and get it's colspan attribute, and add that or 1 to the total
+                var colspan = 1;
+                var colspanAttr = $(this).attr('colspan');
+                if (colspanAttr > 1) {
+                    colspan = colspanAttr;
+                }
+                cellCount += colspan;
+            });
 
+            // Add the placeholder UI - note that this is the item's content, so td rather than tr - and set height of tr
+            ui.placeholder.html('<td colspan="' + cellCount + '"></td>').height(ui.item.height());
+        },
+        update: function (ev, ui) {
+            //highlight the item when the position is changed
+            $(ui.item).effect("highlight", { color: "#2e8aea" }, 500);
         },
         stop: function (ev, ui) {
 
@@ -156,8 +190,9 @@
 
     var linker = function (scope, element, attrs) {
 
-        var $rowControls = jQuery(element).find("td.row-buttons-td div");
-        var $rowStyle = jQuery(element).find("td.row-style");
+        var $elem = jQuery(element);
+        var $rowControls = $elem.find("td.row-buttons-td div");
+        var $rowStyle = $elem.find("td.row-style");
         var selectActive = false;
 
         $rowStyle.find("select").focus(function () {
diff --git a/app/less/table.editor.less b/app/less/table.editor.less
index c1d7b36..f255394 100644
--- a/app/less/table.editor.less
+++ b/app/less/table.editor.less
@@ -4,6 +4,12 @@
 
 .table-editor table {
     border-collapse: separate;
+    
+    /* sortable placeholder */
+    .sortable-placeholder {
+        background-color: #f5f5f5;
+        opacity: 0.5;
+    }
 }
 
 .table-editor td {
@@ -11,28 +17,19 @@
     width: 102px;
 	border: none;
 	line-height: normal;
-	padding: 0;
+	padding: 2px;
     vertical-align: middle;
 }
 
-.table-editor td textarea {
-    width: 75px;
-    height: 50px;
-}
-
-.table-editor td:first-child {
-    text-align: center;
-    width: 10px;
-}
-
 .table-editor th {
     width: 102px;
 	border: none;
 	line-height: normal;
-	padding: 0;
+	padding: 2px;
     text-align: center;
 }
 
+.table-editor td:first-child,
 .table-editor th:first-child {
     text-align: center;
     width: 10px;
@@ -47,11 +44,21 @@
     margin-right: 15px;
     height: 20px;
 	text-align: center;
+    
+    .icon {
+        cursor: pointer;
+    }
 }
 
 .table-editor .row-buttons {
     width: 50px;
     display: none;
+    
+    .icon {
+        cursor: pointer;
+        
+        &.handle { cursor: move; }
+    }
 }
 
 .table-editor td.row-buttons-td {
@@ -81,11 +88,16 @@
     display: block;
 }
 
-.table-editor input[type=text] {
-    padding: 2px;
+.table-editor input[type=text],
+.table-editor td textarea {
+    margin: 0;
     width: 90px;
 }
 
+.table-editor td textarea {
+    height: 50px;
+}
+
 .table-editor .advanced-options {
     padding: 10px;
     background-color: #eee;
@@ -112,8 +124,10 @@
 	text-align: center;
 }
 
-.table-editor tr.row-highlighted td.col-highlighted input {
-    border: 1px solid black;
+.table-editor tr.row-highlighted td.col-highlighted {
+    input, textarea {
+       border: 1px solid black; 
+    }
 }
 
 .table-editor .hide-visibility {
diff --git a/app/views/table.editor.html b/app/views/table.editor.html
index 9a5f39e..e743595 100644
--- a/app/views/table.editor.html
+++ b/app/views/table.editor.html
@@ -30,7 +30,7 @@
                         <i class="icon icon-navigation handle" ng-show="canSort()"></i>            
                     </div>
                 </td>
-                <td class="row-style">
+                <td class="row-style" ng-show="model.config.rowStyles.length > 1">
                     <select ng-model="model.value.rowStylesSelected[$index]" ng-options="style.value as style.label for style in model.config.rowStyles"></select>
                 </td>
             </tr>
@@ -58,7 +58,7 @@
             Use last row as footer?
         </label>
         <label>
-            <input type="button" value="Clear Table" ng-click="clearTable()"/>
+            <input type="button" class="btn btn-default" value="Clear Table" ng-click="clearTable()"/>
         </label>
     </div>
 </div>
\ No newline at end of file