Sorting indicator no longer overlaps the column header in tables. #5066 and #2681

The sorting indicator is now placed in its own div element instead of being added as a background picture for the existing header cell element.

svn changeset:16130/svn branch:6.5

WebContent/VAADIN/themes/base/styles.css

@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"9_9_9_INTERNAL-DEBUG-BUILD";}
-.v-theme-version-9_9_9_INTERNAL-DEBUG-BUILD {display: none;}
+.v-theme-version:after {content:"6_5_0_dev-20101124";}
+.v-theme-version-6_5_0_dev-20101124 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1523,22 +1523,32 @@ div.v-progressindicator-indeterminate-disabled {
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
+}
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -1578,6 +1588,12 @@ div.v-progressindicator-indeterminate-disabled {
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(common/img/sprites.png) no-repeat 4px -37px;

WebContent/VAADIN/themes/base/table/table.css

@@ -89,22 +89,32 @@
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
+}
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(../common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(../common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(../common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -144,6 +154,12 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(../common/img/sprites.png) no-repeat 4px -37px;

WebContent/VAADIN/themes/liferay/styles.css

@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"9_9_9_INTERNAL-DEBUG-BUILD";}
-.v-theme-version-9_9_9_INTERNAL-DEBUG-BUILD {display: none;}
+.v-theme-version:after {content:"6_5_0_dev-20101124";}
+.v-theme-version-6_5_0_dev-20101124 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1523,22 +1523,32 @@ div.v-progressindicator-indeterminate-disabled {
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
+}
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -1578,6 +1588,12 @@ div.v-progressindicator-indeterminate-disabled {
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
@@ -3081,7 +3097,7 @@ select {
 	color: #336699;
 	font-weight: bold;
 	font-size: 11px;
-	padding-right: 4px;
+	padding-left: 4px;
 	padding-top: 6px;
 }
 
@@ -3094,13 +3110,14 @@ select {
 	margin-top: -2px;
 }
 
-
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_up.png) no-repeat right 8px;
+	height: 26px;
 }
 
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_down.png) no-repeat right 10px;
+	height: 26px;
 }
 
 .v-table-resizer {

WebContent/VAADIN/themes/liferay/table/table.css

@@ -47,7 +47,7 @@
 	color: #336699;
 	font-weight: bold;
 	font-size: 11px;
-	padding-right: 4px;
+	padding-left: 4px;
 	padding-top: 6px;
 }
 
@@ -60,13 +60,14 @@
 	margin-top: -2px;
 }
 
-
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_up.png) no-repeat right 8px;
+	height: 26px;
 }
 
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_down.png) no-repeat right 10px;
+	height: 26px;
 }
 
 .v-table-resizer {

WebContent/VAADIN/themes/reindeer/styles.css

@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"9_9_9_INTERNAL-DEBUG-BUILD";}
-.v-theme-version-9_9_9_INTERNAL-DEBUG-BUILD {display: none;}
+.v-theme-version:after {content:"6_5_0_dev-20101124";}
+.v-theme-version-6_5_0_dev-20101124 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1523,22 +1523,32 @@ div.v-progressindicator-indeterminate-disabled {
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
+}
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -1578,6 +1588,12 @@ div.v-progressindicator-indeterminate-disabled {
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
@@ -3603,7 +3619,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent url(menubar/img/submenu-icon.png) no-repeat right 70%;
 	width: 26px;
 	height: 16px;
-	text-indent: -999px;
+	text-indent: -9999px;
 }
 .v-menubar-submenu .v-menubar-menuitem-selected .v-menubar-submenu-indicator {
 	background-image: url(menubar/img/submenu-icon-hover.png);
@@ -4298,29 +4314,26 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent;
 	border-right: 1px solid #c2c3c4;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+
+.v-table-sort-indicator {
+	background: transparent;
+	width: 0px;
+	height: 20px;
+}
+
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
   background-position: right -942px;
+	width: 16px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
   background-position: right -962px;
-}
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -982px;
-}
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1002px;
+	width: 16px;
 }
 .v-table-body,
 .white .v-table-body {
@@ -4362,12 +4375,12 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent no-repeat;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1022px;
+  background-position: left -982px;
 }
 .v-table-column-selector:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1042px;
+  background-position: left -1002px;
 }
 .v-table-focus-slot-left {
 	border-left-color: #222;
@@ -4382,7 +4395,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1062px;
+  background-position: left -1022px;
 	padding: 4px;
 	text-transform: uppercase;
 	font-size: 10px;
@@ -4407,7 +4420,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1082px;
+  background-position: left -1042px;
 	border: 1px solid #939494;
 	border: none;
 	border-radius-bottomleft: 4px;
@@ -4436,7 +4449,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent no-repeat 0 4px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1104px;
+  background-position: left -1064px;
 	padding-left: 12px;
 	padding-right: 4px;
 }
@@ -4447,7 +4460,7 @@ td.v-datefield-calendarpanel-nextyear {
 .v-contextmenu .gwt-MenuItem-selected .v-on {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1118px;
+  background-position: left -1078px;
 }
 
 
@@ -4457,7 +4470,7 @@ td.v-datefield-calendarpanel-nextyear {
 	border-top-color: #2b3033;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1133px;
+  background-position: left -1093px;
 	color: #e7e9ea;
 	text-shadow: #000 0 -1px 0;
 }
@@ -4467,40 +4480,30 @@ td.v-datefield-calendarpanel-nextyear {
 .v-table-strong .v-table-resizer {
 	border-right-color: #1c1f21;
 }
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1153px;
+  background-position: right -1113px;
 }
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1172px;
-}
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container-align-right {
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1191px;
-}
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container-align-right {
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1210px;
+  background-position: right -1132px;
 }
 .v-table-strong .v-table-column-selector {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1229px;
+  background-position: left -1151px;
 }
 .v-table-strong .v-table-column-selector:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1249px;
+  background-position: left -1171px;
 }
 .v-table-strong .v-table-header-drag {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1269px;
+  background-position: left -1191px;
 	color: #e7e9ea;
 	text-shadow: #000 0 -1px 0;
 }
@@ -4522,26 +4525,16 @@ td.v-datefield-calendarpanel-nextyear {
 .black .v-table-resizer {
 	border-right-color: #252729;
 }
-.black .v-table-header-cell-asc .v-table-caption-container {
+.black .v-table-header-cell-asc .v-table-sort-indicator {
   background-image: url(common/img/black-vertical-sprites.png);
   -background-image: url(common/img/black-vertical-sprites-ie6.png);
   background-position: right -642px;
 }
-.black .v-table-header-cell-desc .v-table-caption-container {
+.black .v-table-header-cell-desc .v-table-sort-indicator {
   background-image: url(common/img/black-vertical-sprites.png);
   -background-image: url(common/img/black-vertical-sprites-ie6.png);
   background-position: right -661px;
 }
-.black .v-table-header-cell-asc .v-table-caption-container-align-right {
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1289px;
-}
-.black .v-table-header-cell-desc .v-table-caption-container-align-right {
-  background-image: url(common/img/vertical-sprites.png);
-  -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1308px;
-}
 .black .v-table-column-selector {
   background-image: url(common/img/black-vertical-sprites.png);
   -background-image: url(common/img/black-vertical-sprites-ie6.png);
@@ -4603,14 +4596,14 @@ td.v-datefield-calendarpanel-nextyear {
 	background: no-repeat;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1327px;
+  background-position: left -1211px;
 	padding-left: 3px;
 }
 .v-tabsheet-tabitemcell-first {
 	padding-left: 10px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1359px;
+  background-position: left -1243px;
 }
 .v-tabsheet-tabitem,
 .v-tabsheet-spacertd div {
@@ -4619,7 +4612,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1391px;
+  background-position: left -1275px;
 	padding: 0;
 	color: #222;
 	text-shadow: #fff 0 1px 0;
@@ -4630,7 +4623,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: no-repeat right top;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1423px;
+  background-position: right -1307px;
 	padding: 9px 8px 0 6px;
 }
 .v-tabsheet-tabitem .v-caption-closable {
@@ -4650,7 +4643,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1455px;
+  background-position: left -1339px;
 	cursor: default;
 	text-indent: -999px;
 	overflow: hidden;
@@ -4667,48 +4660,48 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-caption-close:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1473px;
+  background-position: left -1357px;
 }
 .v-tabsheet-caption-close:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1491px;
+  background-position: left -1375px;
 }
 .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1509px;
+  background-position: left -1393px;
 }
 .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1527px;
+  background-position: left -1411px;
 }
 .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1545px;
+  background-position: left -1429px;
 }
 .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1563px;
+  background-position: left -1447px;
 }
 .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1595px;
+  background-position: left -1479px;
 }
 .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1627px;
+  background-position: left -1511px;
 	color: #232930;
 }
 .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1659px;
+  background-position: right -1543px;
 }
 .v-tabsheet-spacertd div {
 	margin-right: 4px;
@@ -4717,7 +4710,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent no-repeat right top;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1691px;
+  background-position: right -1575px;
 }
 .blue .v-tabsheet-content {
 	border-color: #a8bcc5;
@@ -4815,7 +4808,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1723px;
+  background-position: left -1607px;
 	width: 18px;
 	height: 17px;
 	overflow: hidden;
@@ -4827,23 +4820,23 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1740px;
+  background-position: left -1624px;
 }
 .v-tabsheet-scrollerPrev:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1757px;
+  background-position: left -1641px;
 }
 .v-tabsheet-scrollerNext:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1774px;
+  background-position: left -1658px;
 }
 .v-tabsheet-scrollerPrev-disabled,
 .v-tabsheet-scrollerPrev-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1791px;
+  background-position: left -1675px;
 	opacity: 1;
 	filter: none;
 }
@@ -4851,7 +4844,7 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1808px;
+  background-position: left -1692px;
 	opacity: 1;
 	filter: none;
 }
@@ -5037,20 +5030,20 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-tabs-bar .v-tabsheet-tabitemcell {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1826px;
+  background-position: left -1710px;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-first {
 	padding-left: 6px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1846px;
+  background-position: left -1730px;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitem,
 .v-tabsheet-tabs-bar .v-tabsheet-spacertd div {
 	height: 20px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1866px;
+  background-position: left -1750px;
 	font-size: 11px;
 	margin: 0;
 }
@@ -5058,7 +5051,7 @@ td.v-datefield-calendarpanel-nextyear {
 	height: 18px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1886px;
+  background-position: right -1770px;
 	padding: 2px 12px 0 10px;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitem .v-caption-closable,
@@ -5110,23 +5103,23 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1906px;
+  background-position: left -1790px;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1926px;
+  background-position: left -1810px;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1946px;
+  background-position: left -1830px;
 	color: #232930;
 }
 .v-tabsheet-tabs-bar .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1966px;
+  background-position: right -1850px;
 }
 .v-tabsheet-tabcontainer-bar .v-tabsheet-scroller {
 	margin-top: -20px;
@@ -5134,7 +5127,7 @@ td.v-datefield-calendarpanel-nextyear {
 	border-right: none;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1986px;
+  background-position: left -1870px;
 }
 .v-tabsheet-tabcontainer-bar .v-tabsheet-scroller button {
 	margin-top: 1px;
@@ -5188,7 +5181,7 @@ td.v-datefield-calendarpanel-nextyear {
 	background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2006px;
+  background-position: left -1890px;
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -5318,7 +5311,7 @@ textarea.v-textarea-readonly,
 	background: #4d749f repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2029px;
+  background-position: left -1913px;
 	color: #fff;
 	padding: 1px 2px;
 	-webkit-border-radius: 2px;
@@ -5393,7 +5386,7 @@ textarea.v-textarea-readonly,
 	background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2049px;
+  background-position: left -1933px;
 }
 .v-window-header {
 	font-weight: bold;
@@ -5420,13 +5413,13 @@ textarea.v-textarea-readonly,
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2086px;
+  background-position: left -1970px;
 }
 .v-window-footer {
 	background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2101px;
+  background-position: left -1985px;
 	height: 15px;
 }
 .v-window-closebox {
@@ -5437,17 +5430,17 @@ textarea.v-textarea-readonly,
 	background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2116px;
+  background-position: left -2000px;
 }
 .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2132px;
+  background-position: left -2016px;
 }
 .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2148px;
+  background-position: left -2032px;
 }
 .v-window-contents {
 	background: #fff;
@@ -5480,7 +5473,7 @@ textarea.v-textarea-readonly,
 	height: 12px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2164px;
+  background-position: left -2048px;
 }
 .v-window-light .v-window-footer {
 	background: transparent;
@@ -5493,17 +5486,17 @@ textarea.v-textarea-readonly,
 	height: 15px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2176px;
+  background-position: left -2060px;
 }
 .v-window-light .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2191px;
+  background-position: left -2075px;
 }
 .v-window-light .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2206px;
+  background-position: left -2090px;
 }
 .v-window-light .v-window-contents {
 	background: transparent;
@@ -5513,7 +5506,7 @@ textarea.v-textarea-readonly,
 	background: #f7f7f8 repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -2221px;
+  background-position: left -2105px;
 }
 .v-ie6 .v-window-light .v-window-wrap2 {
 	background-image: none;

WebContent/VAADIN/themes/reindeer/table/table.css

@@ -68,21 +68,22 @@
 	background: transparent;
 	border-right: 1px solid #c2c3c4;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+
+.v-table-sort-indicator {
+	background: transparent;
+	width: 0px;
+	height: 20px;
+}
+
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
+	width: 16px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
-}
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-    background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-    background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
+	width: 16px;
 }
 .v-table-body,
 .white .v-table-body {
@@ -215,18 +216,12 @@
 .v-table-strong .v-table-resizer {
 	border-right-color: #1c1f21;
 }
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container-align-right {
-    background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container-align-right {
-    background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
 .v-table-strong .v-table-column-selector {
 	background-image: url(img/col-sel.png); /** sprite-ref: verticals */
 }
@@ -254,18 +249,12 @@
 .black .v-table-resizer {
 	border-right-color: #252729;
 }
-.black .v-table-header-cell-asc .v-table-caption-container {
+.black .v-table-header-cell-asc .v-table-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-header-cell-desc .v-table-caption-container {
+.black .v-table-header-cell-desc .v-table-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-header-cell-asc .v-table-caption-container-align-right {
-    background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.black .v-table-header-cell-desc .v-table-caption-container-align-right {
-    background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
 .black .v-table-column-selector {
 	background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
 }

WebContent/VAADIN/themes/runo/styles.css

@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"9_9_9_INTERNAL-DEBUG-BUILD";}
-.v-theme-version-9_9_9_INTERNAL-DEBUG-BUILD {display: none;}
+.v-theme-version:after {content:"6_5_0_dev-20101124";}
+.v-theme-version-6_5_0_dev-20101124 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1523,22 +1523,32 @@ div.v-progressindicator-indeterminate-disabled {
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
+}
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -1578,6 +1588,12 @@ div.v-progressindicator-indeterminate-disabled {
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
@@ -3685,18 +3701,21 @@ div.v-csslayout-box-shadow {
 	font-size: 15px;
 	padding: 9px 2px 9px 0;
 	text-shadow: #ffffff 0 1px 0;
+	margin-left: 0px;
+}
+.v-table-sort-indicator {
+	width: 0;
+	height: 36px;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(table/img/sort-asc.png) no-repeat right 50%;
+	width: 20px;
+	height: 36px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(table/img/sort-desc.png) no-repeat right 50%;
-}
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(table/img/sort-asc.png) no-repeat left 50%;
-}
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(table/img/sort-desc.png) no-repeat left 50%;
+	width: 20px;
+	height: 36px;
 }
 .v-table-header-cell:hover,
 .v-table-header-cell-asc:hover,

WebContent/VAADIN/themes/runo/table/table.css

@@ -26,18 +26,21 @@
 	font-size: 15px;
 	padding: 9px 2px 9px 0;
 	text-shadow: #ffffff 0 1px 0;
+	margin-left: 0px;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-sort-indicator {
+	width: 0;
+	height: 36px;
+}
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(img/sort-asc.png) no-repeat right 50%;
+	width: 20px;
+	height: 36px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(img/sort-desc.png) no-repeat right 50%;
-}
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(img/sort-asc.png) no-repeat left 50%;
-}
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(img/sort-desc.png) no-repeat left 50%;
+	width: 20px;
+	height: 36px;
 }
 .v-table-header-cell:hover,
 .v-table-header-cell-asc:hover,

src/com/vaadin/terminal/gwt/client/ui/VScrollTable.java

@@ -195,7 +195,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
      */
     private class SelectionRange {
         private VScrollTableRow startRow;
-        private int length;
+        private final int length;
 
         /**
          * Constuctor.
@@ -1136,8 +1136,15 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
     }
 
     private void setColWidth(int colIndex, int w, boolean isDefinedWidth) {
-        // Set header column width
         final HeaderCell hcell = tHead.getHeaderCell(colIndex);
+
+        // Make sure that the column grows to accommodate the sort indicator if
+        // necessary.
+        if (w < hcell.getMinWidth()) {
+            w = hcell.getMinWidth();
+        }
+
+        // Set header column width
         hcell.setWidth(w, isDefinedWidth);
 
         // Set body column width
@@ -1370,7 +1377,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
         // fix "natural" width if width not set
         if (width == null || "".equals(width)) {
             int w = total;
-            w += scrollBody.getCellExtraWidth() * visibleColOrder.length;
+            w += tHead.getTotalExtraWidth();
             if (willHaveScrollbarz) {
                 w += Util.getNativeScrollbarSize();
             }
@@ -1382,7 +1389,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             // Hey IE, are you really sure about this?
             availW = scrollBody.getAvailableWidth();
         }
-        availW -= scrollBody.getCellExtraWidth() * visibleColOrder.length;
+        availW -= tHead.getTotalExtraWidth();
 
         if (willHaveScrollbarz) {
             availW -= Util.getNativeScrollbarSize();
@@ -1709,6 +1716,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
 
         Element captionContainer = DOM.createDiv();
 
+        Element sortIndicator = DOM.createDiv();
+
         Element colResizeWidget = DOM.createDiv();
 
         Element floatingCopyOfHeaderCell;
@@ -1739,6 +1748,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
 
         private float expandRatio = 0;
 
+        private boolean sorted;
+
         public void setSortable(boolean b) {
             sortable = b;
         }
@@ -1758,6 +1769,10 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
 
             DOM.appendChild(td, colResizeWidget);
 
+            DOM.setElementProperty(sortIndicator, "className", CLASSNAME
+                    + "-sort-indicator");
+            DOM.appendChild(td, sortIndicator);
+
             DOM.setElementProperty(captionContainer, "className", CLASSNAME
                     + "-caption-container");
 
@@ -1781,9 +1796,6 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 // on column resize expand ratio becomes zero
                 expandRatio = 0;
             }
-            if (width == w) {
-                return;
-            }
             if (width == -1) {
                 // go to default mode, clip content if necessary
                 DOM.setStyleAttribute(captionContainer, "overflow", "");
@@ -1793,8 +1805,15 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 DOM.setStyleAttribute(captionContainer, "width", "");
                 setWidth("");
             } else {
-
-                captionContainer.getStyle().setPropertyPx("width", w);
+                /*
+                 * If this column is sorted, we need to make room for the sort
+                 * indicator by subtracting the styled margin and resizer width
+                 * from the width of the caption container.
+                 */
+                int captionContainerWidth = w - sortIndicator.getOffsetWidth()
+                        - colResizeWidget.getOffsetWidth();
+                captionContainer.getStyle().setPropertyPx("width",
+                        captionContainerWidth);
 
                 /*
                  * if we already have tBody, set the header width properly, if
@@ -1802,13 +1821,12 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                  * unless TD width is not explicitly set.
                  */
                 if (scrollBody != null) {
-                    int tdWidth = width + scrollBody.getCellExtraWidth();
+                    int tdWidth = width + getCellExtraWidth();
                     setWidth(tdWidth + "px");
                 } else {
                     Scheduler.get().scheduleDeferred(new Command() {
                         public void execute() {
-                            int tdWidth = width
-                                    + scrollBody.getCellExtraWidth();
+                            int tdWidth = width + getCellExtraWidth();
                             setWidth(tdWidth + "px");
                         }
                     });
@@ -1844,6 +1862,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
         }
 
         private void setSorted(boolean sorted) {
+            this.sorted = sorted;
             if (sorted) {
                 if (sortAscending) {
                     this.setStyleName(CLASSNAME + "-header-cell-asc");
@@ -1970,7 +1989,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                             client.updateVariable(paintableId, "sortascending",
                                     !sortAscending, false);
                         } else {
-                            // set table scrolled by this column
+                            // set table sorted by this column
                             client.updateVariable(paintableId, "sortcolumn",
                                     cid, false);
                         }
@@ -2053,8 +2072,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                     }
 
                     int newWidth = originalWidth + deltaX;
-                    if (newWidth < scrollBody.getCellExtraWidth()) {
-                        newWidth = scrollBody.getCellExtraWidth();
+                    if (newWidth < getMinWidth()) {
+                        newWidth = getMinWidth();
                     }
                     setColWidth(colIndex, newWidth, true);
                 }
@@ -2064,6 +2083,14 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             }
         }
 
+        public int getMinWidth() {
+            int cellExtraWidth = getCellExtraWidth();
+            // cellExtraWidth might be -1 (undefined) if we don't yet have a
+            // scroll body.
+            return (cellExtraWidth < 0 ? 0 : cellExtraWidth)
+                    + sortIndicator.getOffsetWidth();
+        }
+
         public String getCaption() {
             return DOM.getInnerText(captionContainer);
         }
@@ -2080,17 +2107,12 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 captionContainer.removeClassName(ALIGN_PREFIX + "left");
                 switch (c) {
                 case ALIGN_CENTER:
-                    DOM.setStyleAttribute(captionContainer, "textAlign",
-                            "center");
                     captionContainer.addClassName(ALIGN_PREFIX + "center");
                     break;
                 case ALIGN_RIGHT:
-                    DOM.setStyleAttribute(captionContainer, "textAlign",
-                            "right");
                     captionContainer.addClassName(ALIGN_PREFIX + "right");
                     break;
                 default:
-                    DOM.setStyleAttribute(captionContainer, "textAlign", "");
                     captionContainer.addClassName(ALIGN_PREFIX + "left");
                     break;
                 }
@@ -2122,7 +2144,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                     // cols)
 
                     final int hw = ((Element) getElement().getLastChild())
-                            .getOffsetWidth() + scrollBody.getCellExtraWidth();
+                            .getOffsetWidth() + getCellExtraWidth();
                     if (columnIndex < 0) {
                         columnIndex = 0;
                         for (Iterator<Widget> it = tHead.iterator(); it
@@ -2147,6 +2169,58 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             return expandRatio;
         }
 
+        public boolean isSorted() {
+            return sorted;
+        }
+
+        private int cellExtraWidth = -1;
+
+        /**
+         * Method to return the space used for cell paddings + border.
+         */
+        public int getCellExtraWidth() {
+            if (cellExtraWidth < 0 && scrollBody != null) {
+                detectExtraWidth();
+            }
+            return cellExtraWidth;
+        }
+
+        public void clearCellExtraWidth() {
+            cellExtraWidth = -1;
+        }
+
+        private void detectExtraWidth() {
+            NodeList<TableRowElement> rows = scrollBody.tBodyElement.getRows();
+            if (rows.getLength() == 0) {
+                /* need to temporary add empty row and detect */
+                VScrollTableRow scrollTableRow = scrollBody.new VScrollTableRow();
+                scrollBody.tBodyElement
+                        .appendChild(scrollTableRow.getElement());
+                detectExtraWidth();
+                scrollBody.tBodyElement
+                        .removeChild(scrollTableRow.getElement());
+            } else {
+                colIndex = getColIndexByKey(cid);
+                boolean noCells = false;
+                TableRowElement item = rows.getItem(0);
+                TableCellElement colTD = item.getCells().getItem(colIndex);
+                if (colTD == null) {
+                    // content is currently empty, we need to add a fake cell
+                    // for measuring
+                    noCells = true;
+                    VScrollTableRow next = (VScrollTableRow) iterator().next();
+                    next.addCell(null, "", align, "", true, isSorted());
+                    colTD = item.getCells().getItem(colIndex);
+                }
+                com.google.gwt.dom.client.Element wrapper = colTD
+                        .getFirstChildElement();
+                cellExtraWidth = colTD.getOffsetWidth()
+                        - wrapper.getOffsetWidth();
+                if (noCells) {
+                    colTD.getParentElement().removeChild(colTD);
+                }
+            }
+        }
     }
 
     /**
@@ -2263,8 +2337,14 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                     c.setAlign(col.getStringAttribute("align").charAt(0));
                 }
                 if (col.hasAttribute("width")) {
-                    final String width = col.getStringAttribute("width");
-                    c.setWidth(Integer.parseInt(width), true);
+                    final String widthStr = col.getStringAttribute("width");
+                    // Make sure to accomodate for the sort indicator if
+                    // necessary.
+                    int width = Integer.parseInt(widthStr);
+                    if (width < c.getMinWidth()) {
+                        width = c.getMinWidth();
+                    }
+                    c.setWidth(width, true);
                 } else if (recalcWidths) {
                     c.setUndefinedWidth();
                 }
@@ -2572,18 +2652,25 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             return aligns;
         }
 
+        public int getTotalExtraWidth() {
+            int totalExtraWidth = 0;
+            for (Widget w : visibleCells) {
+                totalExtraWidth += ((HeaderCell) w).getCellExtraWidth();
+            }
+            return totalExtraWidth;
+        }
     }
 
     /**
      * A cell in the footer
      */
     public class FooterCell extends Widget {
-        private Element td = DOM.createTD();
-        private Element captionContainer = DOM.createDiv();
+        private final Element td = DOM.createTD();
+        private final Element captionContainer = DOM.createDiv();
         private char align = ALIGN_LEFT;
         private int width = -1;
         private float expandRatio = 0;
-        private String cid;
+        private final String cid;
         boolean definedWidth = false;
         private int naturalWidth = -1;
 
@@ -2704,7 +2791,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                      * Reduce with one since footer does not have any spacers,
                      * instead a 1 pixel border.
                      */
-                    int tdWidth = width + scrollBody.getCellExtraWidth()
+                    int tdWidth = width
+                            + tHead.getHeaderCell(cid).getCellExtraWidth()
                             - borderWidths;
                     setWidth(tdWidth + "px");
                 } else {
@@ -2712,8 +2800,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                         public void execute() {
                             int borderWidths = 1;
                             int tdWidth = width
-                                    + scrollBody.getCellExtraWidth()
-                                    - borderWidths;
+                                    + tHead.getHeaderCell(cid)
+                                            .getCellExtraWidth() - borderWidths;
                             setWidth(tdWidth + "px");
                         }
                     });
@@ -2850,7 +2938,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                     // cols)
 
                     final int hw = ((Element) getElement().getLastChild())
-                            .getOffsetWidth() + scrollBody.getCellExtraWidth();
+                            .getOffsetWidth()
+                            + tHead.getHeaderCell(cid).getCellExtraWidth();
                     if (columnIndex < 0) {
                         columnIndex = 0;
                         for (Iterator<Widget> it = tHead.iterator(); it
@@ -3525,48 +3614,6 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             }
         }
 
-        private int cellExtraWidth = -1;
-
-        /**
-         * Method to return the space used for cell paddings + border.
-         */
-        private int getCellExtraWidth() {
-            if (cellExtraWidth < 0) {
-                detectExtrawidth();
-            }
-            return cellExtraWidth;
-        }
-
-        private void detectExtrawidth() {
-            NodeList<TableRowElement> rows = tBodyElement.getRows();
-            if (rows.getLength() == 0) {
-                /* need to temporary add empty row and detect */
-                VScrollTableRow scrollTableRow = new VScrollTableRow();
-                tBodyElement.appendChild(scrollTableRow.getElement());
-                detectExtrawidth();
-                tBodyElement.removeChild(scrollTableRow.getElement());
-            } else {
-                boolean noCells = false;
-                TableRowElement item = rows.getItem(0);
-                TableCellElement firstTD = item.getCells().getItem(0);
-                if (firstTD == null) {
-                    // content is currently empty, we need to add a fake cell
-                    // for measuring
-                    noCells = true;
-                    VScrollTableRow next = (VScrollTableRow) iterator().next();
-                    next.addCell(null, "", ALIGN_LEFT, "", true);
-                    firstTD = item.getCells().getItem(0);
-                }
-                com.google.gwt.dom.client.Element wrapper = firstTD
-                        .getFirstChildElement();
-                cellExtraWidth = firstTD.getOffsetWidth()
-                        - wrapper.getOffsetWidth();
-                if (noCells) {
-                    firstTD.getParentElement().removeChild(firstTD);
-                }
-            }
-        }
-
         private void reLayoutComponents() {
             for (Widget w : this) {
                 VScrollTableRow r = (VScrollTableRow) w;
@@ -3722,8 +3769,9 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
 
                 // row header
                 if (showRowHeaders) {
+                    boolean sorted = tHead.getHeaderCell(col).isSorted();
                     addCell(uidl, buildCaptionHtmlSnippet(uidl), aligns[col++],
-                            "", true);
+                            "", true, sorted);
                     visibleColumnIndex++;
                 }
 
@@ -3743,15 +3791,16 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                         style = uidl.getStringAttribute("style-" + columnId);
                     }
 
+                    boolean sorted = tHead.getHeaderCell(col).isSorted();
                     if (cell instanceof String) {
                         addCell(uidl, cell.toString(), aligns[col++], style,
-                                false);
+                                false, sorted);
                     } else {
                         final Paintable cellContent = client
                                 .getPaintable((UIDL) cell);
 
                         addCell(uidl, (Widget) cellContent, aligns[col++],
-                                style);
+                                style, sorted);
                         paintComponent(cellContent, (UIDL) cell);
                     }
                 }
@@ -3766,11 +3815,11 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             public VScrollTableRow() {
                 this(0);
                 addStyleName(CLASSNAME + "-row");
-                addCell(null, "_", 'b', "", true);
+                addCell(null, "_", 'b', "", true, false);
             }
 
             public void addCell(UIDL rowUidl, String text, char align,
-                    String style, boolean textIsHTML) {
+                    String style, boolean textIsHTML, boolean sorted) {
                 // String only content is optimized by not using Label widget
                 final Element td = DOM.createTD();
                 final Element container = DOM.createDiv();
@@ -3778,6 +3827,9 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 if (style != null && !style.equals("")) {
                     className += " " + CLASSNAME + "-cell-content-" + style;
                 }
+                if (sorted) {
+                    className += " " + CLASSNAME + "-cell-content-sorted";
+                }
                 td.setClassName(className);
                 container.setClassName(CLASSNAME + "-cell-wrapper");
                 if (textIsHTML) {
@@ -3800,13 +3852,17 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 getElement().appendChild(td);
             }
 
-            public void addCell(UIDL rowUidl, Widget w, char align, String style) {
+            public void addCell(UIDL rowUidl, Widget w, char align,
+                    String style, boolean sorted) {
                 final Element td = DOM.createTD();
                 final Element container = DOM.createDiv();
                 String className = CLASSNAME + "-cell-content";
                 if (style != null && !style.equals("")) {
                     className += " " + CLASSNAME + "-cell-content-" + style;
                 }
+                if (sorted) {
+                    className += " " + CLASSNAME + "-cell-content-sorted";
+                }
                 td.setClassName(className);
                 container.setClassName(CLASSNAME + "-cell-wrapper");
                 // TODO most components work with this, but not all (e.g.
@@ -4301,7 +4357,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                         // but a best guess (expecting similar content in all
                         // columns ->
                         // if one component is relative width so are others)
-                        w = headerCell.getOffsetWidth() - getCellExtraWidth();
+                        w = headerCell.getOffsetWidth()
+                                - headerCell.getCellExtraWidth();
                     }
                 }
                 return new RenderSpace(w, 0) {
@@ -4508,8 +4565,7 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
             int availW = scrollBody.getAvailableWidth();
             // Hey IE, are you really sure about this?
             availW = scrollBody.getAvailableWidth();
-            int visibleCellCount = tHead.getVisibleCellCount();
-            availW -= scrollBody.getCellExtraWidth() * visibleCellCount;
+            availW -= tHead.getTotalExtraWidth();
             if (willHaveScrollbars()) {
                 availW -= Util.getNativeScrollbarSize();
             }
@@ -4553,8 +4609,8 @@ public class VScrollTable extends FlowPanel implements Table, ScrollHandler,
                 // fix body height (may vary if lazy loading is offhorizontal
                 // scrollbar appears/disappears)
                 int bodyHeight = scrollBody.getRequiredHeight();
-                boolean needsSpaceForHorizontalSrollbar = (availW < usedMinimumWidth);
-                if (needsSpaceForHorizontalSrollbar) {
+                boolean needsSpaceForHorizontalScrollbar = (availW < usedMinimumWidth);
+                if (needsSpaceForHorizontalScrollbar) {
                     bodyHeight += Util.getNativeScrollbarSize();
                 }
                 int heightBefore = getOffsetHeight();

src/com/vaadin/ui/Table.java

@@ -390,6 +390,8 @@ public class Table extends AbstractSelect implements Action.Container,
 
     private MultiSelectMode multiSelectMode = MultiSelectMode.DEFAULT;
 
+    private boolean recalculateAllColumnWidths = false;
+
     /* Table constructors */
 
     /**
@@ -2052,6 +2054,7 @@ public class Table extends AbstractSelect implements Action.Container,
                 }
             }
             if (doSort) {
+                recalculateAllColumnWidths = true;
                 this.sort();
                 resetPageBuffer();
             }
@@ -2285,6 +2288,10 @@ public class Table extends AbstractSelect implements Action.Container,
                 target.addAttribute("recalcWidths", true);
             }
         }
+        if (recalculateAllColumnWidths) {
+            target.addAttribute("recalcWidths", true);
+            recalculateAllColumnWidths = false;
+        }
 
         if (!isNullSelectionAllowed() && getNullSelectionItemId() != null
                 && containsId(getNullSelectionItemId())) {

tests/src/com/vaadin/tests/components/table/ColumnHeaderAlignments.java

@@ -1,8 +1,12 @@
 package com.vaadin.tests.components.table;
 
+import com.vaadin.data.Item;
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
 import com.vaadin.tests.components.TestBase;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Select;
 import com.vaadin.ui.Table;
@@ -10,12 +14,20 @@ import com.vaadin.ui.Table;
 @SuppressWarnings("serial")
 public class ColumnHeaderAlignments extends TestBase {
 
+    private static final String BAZ = "Baz (right)";
+    private static final String BAR = "Bar (center)";
+    private static final String FOO = "Foo (left)";
+    private Table fooTable;
+    private Table barTable;
+    private Table bazTable;
+
     @Override
     protected void setup() {
         Select theme = new Select();
         theme.addItem("reindeer");
         theme.addItem("runo");
         theme.addItem("base");
+        theme.addItem("liferay");
         theme.setValue("reindeer");
         theme.setNullSelectionAllowed(false);
         theme.setImmediate(true);
@@ -25,25 +37,48 @@ public class ColumnHeaderAlignments extends TestBase {
             }
         });
         addComponent(theme);
+        CheckBox footers = new CheckBox("Show footers", new ClickListener() {
+            public void buttonClick(ClickEvent event) {
+                fooTable.setFooterVisible((Boolean) event.getButton()
+                        .getValue());
+                barTable.setFooterVisible((Boolean) event.getButton()
+                        .getValue());
+                bazTable.setFooterVisible((Boolean) event.getButton()
+                        .getValue());
+            }
+        });
+        footers.setImmediate(true);
+        addComponent(footers);
         HorizontalLayout tables = new HorizontalLayout();
-        tables.addComponent(createTable(null));
-        tables.addComponent(createTable("strong"));
-        tables.addComponent(createTable("black"));
+        fooTable = createTable(null);
+        tables.addComponent(fooTable);
+        barTable = createTable("strong");
+        tables.addComponent(barTable);
+        bazTable = createTable("black");
+        tables.addComponent(bazTable);
         addComponent(tables);
     }
 
     private Table createTable(String style) {
         Table table = new Table();
-        table.addContainerProperty("Foo (left)", String.class, "");
-        table.addContainerProperty("Bar (center)", String.class, "");
-        table.addContainerProperty("Baz (right)", String.class, "");
+        table.addContainerProperty(FOO, String.class, "");
+        table.addContainerProperty(BAR, String.class, "");
+        table.addContainerProperty(BAZ, String.class, "");
 
-        table.setColumnAlignment("Foo (left)", Table.ALIGN_LEFT);
-        table.setColumnAlignment("Bar (center)", Table.ALIGN_CENTER);
-        table.setColumnAlignment("Baz (right)", Table.ALIGN_RIGHT);
+        table.setColumnAlignment(FOO, Table.ALIGN_LEFT);
+        table.setColumnAlignment(BAR, Table.ALIGN_CENTER);
+        table.setColumnAlignment(BAZ, Table.ALIGN_RIGHT);
         if (style != null) {
             table.setStyleName(style);
         }
+
+        for (int i = 0; i < 100; i++) {
+            Item item = table.addItem(i);
+            item.getItemProperty(FOO).setValue("foo");
+            item.getItemProperty(BAR).setValue("bar");
+            item.getItemProperty(BAZ).setValue("baz");
+        }
+
         return table;
     }