[JENKINS-10251] Styling the matrix configuration table to look more like Jenkins tables

instead of the default HTML table look. Also moving the
"Configuration Matrix" title as a part of the table, to gain some space.

core/src/main/resources/lib/hudson/project/matrix.jelly

@@ -53,18 +53,17 @@ THE SOFTWARE.
         </j:forEach>
       </j:when>
       <j:otherwise>
-        <h2>${%Configuration Matrix}</h2>
-        <table border="1" class="middle-align center-align">
+        <table id="configuration-matrix">
           <!-- X-axis -->
           <j:forEach var="x" items="${o.x}" varStatus="loop">
-            <tr>
+            <tr class="matrix-row">
               <!-- space for Y-axis -->
               <j:if test="${!empty(o.y)}">
-                <td colspan="${size(o.y)}" />
+                <td id="matrix-title" colspan="${size(o.y)}">${%Configuration Matrix}</td>
               </j:if>
               <j:forEach begin="1" end="${o.repeatX(loop.index)}">
                 <j:forEach var="v" items="${x.values}">
-                  <td colspan="${o.width(loop.index)}">${v}</td>
+                  <td class="matrix-header" colspan="${o.width(loop.index)}">${v}</td>
                 </j:forEach>
               </j:forEach>
             </tr>
@@ -75,12 +74,12 @@ THE SOFTWARE.
             <tr>
               <j:forEach var="y" items="${o.y}" varStatus="loop">
                 <j:if test="${r.drawYHeader(loop.index)!=null}">
-                  <td rowspan="${o.height(loop.index)}">${r.drawYHeader(loop.index)}</td>
+                  <td class="matrix-leftcolumn" rowspan="${o.height(loop.index)}">${r.drawYHeader(loop.index)}</td>
                 </j:if>
               </j:forEach>
 
               <j:forEach var="c" items="${r}">
-                <td>
+                <td class="matrix-cell">
                   <j:choose>
                     <j:forEach var="p" items="${c}">
                       <div>

war/src/main/webapp/css/style.css

@@ -1013,3 +1013,33 @@ table.progress-bar.red td.progress-bar-done {
     background-color: #F0F0F0;
     padding: 0.5em;
 }
+
+/* ========================= matrix configuration table ================== */
+table#configuration-matrix {
+	border-width: 1px;
+	border-color: #BBBBBB;
+	border-style: solid;
+	border-collapse: collapse;
+}
+tr.matrix-row {
+	background: #f0f0f0;
+	border-bottom: 1px #BBBBBB solid;
+	font-weight: bold;
+}
+td.matrix-header {
+	padding: 3px;
+}
+td#matrix-title {
+	border-right: 1px #BBBBBB solid;
+	padding: 3px;
+}
+td.matrix-leftcolumn {
+	font-weight: bold;
+	background: #f0f0f0;
+	border-right: 1px #BBBBBB solid;
+	padding: 3px;
+}
+td.matrix-cell {
+	border: 1px #BBBBBB solid;
+	text-align: center;
+}
\ No newline at end of file