Hi Frances,
I may be able to help you part of the way.
Try a test page with the following responsive table, which you will notice requires vertical headings & also horizontal headings at the top, so a rethink of how your data displays in responsive mode will probably be required.
Table HTML:
<table class="data-table">
<thead>
<th class="transparent" scope="col"></th>
<th class="thead" scope="col">1 King Size Bed</th>
<th class="thead" scope="col">1 Queen Size Bed</th>
<th class="thead" scope="col">1 King & 1 Sofa Bed</th>
<th class="thead" scope="col">1 King & 1 Sofa Bed</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><span class="i">Max Persons</span></th>
<td class="data-table" >2</td>
<td class="data-table" >2</td>
<td class="data-table" >4</td>
<td class="data-table" >4</td>
</tr>
<tr>
<th scope="row">Physical Rooms</th>
<td class="data-table" >1</td>
<td class="data-table" >1</td>
<td class="data-table" >1</td>
<td class="data-table" >1</td>
</tr>
<tr>
<th scope="row">Room View</th>
<td class="data-table" >Palo Alto & Courtyard View</td>
<td class="data-table" >Palo Alto View</td>
<td class="data-table" >Courtyard View</td>
<td class="data-table" >Courtyard View</td>
</tr>
<tr>
<th scope="row"><span class="i">Down Duvet Pillows</span></th>
<td class="data-table" >Y</td>
<td class="no" >N</td>
<td class="data-table" >Y</td>
<td class="data-table" >Y</td>
</tr>
<tr>
<th scope="row"><span class="i">Hypo-allrgenic Bedding Option</span></th>
<td class="data-table" >Y</td>
<td class="no" >N</td>
<td class="data-table" >Y</td>
<td class="no" >N</td>
</tr>
<tr>
<th scope="row"><span class="i">Work Desk / Office Supplies</span></th>
<td class="data-table" >Y</td>
<td class="data-table" >N</td>
<td class="data-table" >Y</td>
<td class="data-table" >Y</td>
</tr>
</tbody>
</table>
Create a separate Table css Style Sheet and link it.
/* Table css */
div.data-table-wrapper {
margin: none;
width: auto;
}
table.data-table {
font-size: 12px;
padding: 20px;
color: #000;
line-height: normal;
border: 1px solid #CCC;
width: 100%;
}
/*Data Table CSS3 Properties*/
table.data-table {
background-color: rgba(240,240,240,.6);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
table.data-table th {
background-color: rgba(102,153,153,.7);
font-weight: normal;
padding: 5px;
border: 1px dotted #CCC;
text-align: left;
}
table.data-table td {
border: 1px solid #999;
text-align: center;
padding: 2px;
background-color: rgba(204,204,204,.5);
color: #000;
}
.thead{
background-color: rgba(102,153,153,.2);
}
table.data-table .transparent {
border: 0;
font-size: 16px;
text-align: left;
}
.heading{
font-size: 1.em !important;
font-weight: bold !important;
}
table.data-table .no {
background-color: #C05A5A;
color: #000;
border-color: #C05A5A;
}
/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 400px) {
th, td, tr {
display: block;
text-align: left;
width: auto;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td:before {
display: block;
font-weight: bold;
}
td:nth-of-type(1):before {
content: "1 King Size Bed";
}
td:nth-of-type(2):before {
content: "1 Queen Size Bed";
}
td:nth-of-type(3):before {
content: "1 King & 1 Sofa Bed";
}
td:nth-of-type(4):before {
content: "1 King & 1 Sofa Bed";
}
}
Rod