From 46530614034e7242fc9aec158b7720bab8aa51ce Mon Sep 17 00:00:00 2001
From: John Postlethwait <john.postlethwait@nebula.com>
Date: Mon, 26 Mar 2012 14:38:13 -0700
Subject: [PATCH] Replacing the caption tag in data tables.

Using a new row in the thead instead now. This is
due to a WebKit bug where the caption element's
size cannot be correctly calculated on tables with
borders.

Fixes Bug #965603

Change-Id: I08962c850061860ed0bd749deb389205c5b731fe
---
 .../templates/horizon/common/_data_table.html | 10 ++--
 horizon/tests/table_tests.py                  |  2 +-
 .../static/dashboard/css/style.css            | 46 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/horizon/templates/horizon/common/_data_table.html b/horizon/templates/horizon/common/_data_table.html
index f96e78447..e64ebf70b 100644
--- a/horizon/templates/horizon/common/_data_table.html
+++ b/horizon/templates/horizon/common/_data_table.html
@@ -3,11 +3,13 @@
   <form action="{{ table.get_absolute_url }}" method="POST">{% csrf_token %}
   {% with columns=table.get_columns rows=table.get_rows %}
   <table id="{{ table.name }}" class="table table-bordered table-striped">
-    <caption class='table_header'>
-      <h3 class='table_title'>{{ table }}</h3>
-      {{ table.render_table_actions }}
-    </caption>
     <thead>
+      <tr class='table_caption'>
+        <th class='table_header' colspan='{{ columns|length }}'>
+          <h3 class='table_title'>{{ table }}</h3>
+          {{ table.render_table_actions }}
+        </th>
+      </tr>
       <tr>
         {% for column in columns %}
           <th {{ column.attr_string|safe }}>{{ column }}</th>
diff --git a/horizon/tests/table_tests.py b/horizon/tests/table_tests.py
index fb50df0b1..0c0570159 100644
--- a/horizon/tests/table_tests.py
+++ b/horizon/tests/table_tests.py
@@ -391,7 +391,7 @@ class DataTableTests(test.TestCase):
         # Whole table
         resp = http.HttpResponse(self.table.render())
         self.assertContains(resp, '<table id="my_table"', 1)
-        self.assertContains(resp, '<th ', 7)
+        self.assertContains(resp, '<th ', 8)
         self.assertContains(resp, 'id="my_table__row__1"', 1)
         self.assertContains(resp, 'id="my_table__row__2"', 1)
         self.assertContains(resp, 'id="my_table__row__3"', 1)
diff --git a/openstack_dashboard/static/dashboard/css/style.css b/openstack_dashboard/static/dashboard/css/style.css
index 0dacddd3b..65685a55e 100644
--- a/openstack_dashboard/static/dashboard/css/style.css
+++ b/openstack_dashboard/static/dashboard/css/style.css
@@ -305,11 +305,54 @@ a.current_item:hover h3, a.current_item:hover h4 {
   padding: 0 0 0 1px;
 }
 
+
+.table-bordered {
+  border: none;
+}
 .table_header {
   min-height: 35px;
   padding: 5px 0;
 }
-
+.table_caption th {
+  background-color: transparent;
+  border: none;
+}
+.table-bordered tr.table_caption + tr th {
+  border-top: 1px solid #ddd;
+}
+.table-bordered tr.table_caption + tr th:first-child,
+.table-bordered tr.table_caption + tr th.hide + th {
+  -moz-border-radius-topleft: 4px;
+  -webkit-border-top-left-radius: 4px;
+  border-top-left-radius: 4px;
+  border-left: 1px solid #ddd;
+}
+.table-bordered tr.table_caption + tr th:last-child {
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  border-right: 1px solid #ddd;
+}
+.table-bordered tbody tr td:first-child,
+.table-bordered tfoot tr td:first-child {
+  border-left: 1px solid #ddd;
+}
+.table-bordered tbody tr td:last-child,
+.table-bordered tfoot tr td:last-child {
+  border-right: 1px solid #ddd;
+}
+.table-bordered tfoot tr td:first-child {
+  border-bottom: 1px solid #ddd;
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.table-bordered tfoot tr td:last-child {
+  border-bottom: 1px solid #ddd;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
 .table_title h3, .table_header h3 {
     font-family: anivers;
     font-weight: normal;
@@ -317,7 +360,6 @@ a.current_item:hover h3, a.current_item:hover h4 {
     margin-bottom: 5px;
     float: left;
 }
-
 th {
     background: #f1f1f1;
 }