Use this CSS for more responsive HTML tables on UXi.  The following examples are in reference to a table with the css class of rates.  The css class of 'odd' is also used to highlight every other row



 

<table class="rates">
<tbody>
<tr>
	<th>Header One</th>
	<th>Header Two</th>
	<th>Header Three</th>
</tr>
<tr>
	<td>Info</td>
	<td>Info</td>
	<td>Info</td>
</tr>
<tr class="odd">
	<td>Info</td>
	<td>Info</td>
	<td>Info</td>
</tr>
<tr>
	<td>Info</td>
	<td>Info</td>
	<td>Info</td>
</tr>
</tbody>
</table>

 



 

table.rates {
  border-collapse:collapse;
  border-spacing:0;
  border-color:#fff;
  border:none;
  width: 100%;
  text-align: left;
}

table.rates tbody tr th {
  font-size:14px;
  font-weight:bold;
  padding:10px 2px;
  border-style:solid;
  border-width:1px;
  border-color: #fff;
  overflow:hidden;
  word-break:normal;
  background-color: #ccc;
  color:#6d6d6d;
  text-align:center;
}
table.rates tbody tr td {
  font-size:14px;
  padding:10px 2px;
  border-style:solid;
  border-width:1px;
  border-color: #fff;
  overflow:hidden;
  word-break:normal;
  color:#6d6d6d;
  text-align:center;
  background-color:#f1f1f1;
}

table.rates tbody tr.odd td {
  border-color:#fff;
  color:#343434;
  background-color:#e5e5e5;
}