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

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'>
+    <thead>
+      <tr class='table_caption'>
+        <th class='table_header' colspan='{{ columns|length }}'>
           <h3 class='table_title'>{{ table }}</h3>
           {{ table.render_table_actions }}
-    </caption>
+        </th>
-    <thead>
+      </tr>
       <tr>
         {% for column in columns %}
           <th {{ column.attr_string|safe }}>{{ column }}</th>

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)

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;
 }