How to convert this 4 column table into single column table, but still maintaining the accessibility the table

Question

I want to make this table http://jsfiddle.net/B7SVK/ from 4 column to single column because I need to convert this table from Desktop to Mobile website and mobile device has limited width. and I don't want horizontal scrolling in webpage.

So is there a way to convert this 4 column table into single column table while maintaining the accessibility and association between relevant data cells and heading

  <table>
        <caption>
        Contact Information
        </caption>
<thead>
        <tr>
                <th scope="col">Name</th>
                <th scope="col">Phone#</th>
                <th scope="col">Fax#</th>
                <th scope="col">City</th>
        </tr>
</thead>
<tbody>
        <tr>
                <th scope="row">Joel Garner</th>
                <td>412-212-5421</td>
                <td>412-212-5400</td>
                <td>Pittsburgh</td>
        </tr>
        <tr>
                <th scope="row">Clive Lloyd</th>
                <td>410-306-1420</td>
                <td>410-306-5400</td>
                <td>Baltimore</td>
        </tr>
        <tr>
                <th scope="row">Gordon Greenidge</th>
                <td>281-564-6720</td>
                <td>281-511-6600</td>
                <td>Houston</td>
        </tr>
</tbody>
</table>

Answer 1

You can completely re-style a table by changing all the elements inside a table to display: block; e.g.

table, thead, tbody, tr, th, td {display: block; text-align: left;}

that's just a broad sweep, as you can just as well have some of them display: inline; or float as if they were non-table elements.. it depends on what you want your single column to look like.

and maybe generated content would help regards table headings (visual associations).. i.e. by hiding the <th> elements and generating the "heading" before the "cell" content.. will try to make a sample fiddle

Example JSFiddle

Code in fiddle:

html, body {margin: 0; padding: 0;}

table, thead, tbody, tr, th, td {display: block; text-align: left;}

thead {display: none;}

td:before {
float: left;
width: 200px;
background: #eee;
}

td {overflow: hidden;}

td:before {content: "Item";}
td+td:before {content: "Price (Euro)";}
td+td+td:before {content: "Postage and Packaging (Euro)";}
td+td+td+td:before {content: "Estimated Delivery Time";}

HTML: note I put the header row into a <thead> so it can be hidden

<table class="single-borders">
  <thead>
    <tr><th>Item</th><th>Price (Euro)</th><th>Postage and Packaging (Euro)</th><th>Estimated Delivery Time</th></tr>
  </thead>
  <tbody>
   <tr><td>Rocking Horse</td><td>€&nbsp;40.00</td><td>€&nbsp;20</td><td>3 working days</td></tr>
   <tr><td style="color:#666">Princess Costume *</td><td>€&nbsp;20.00</td><td>€&nbsp;5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Soldier Uniform</td><td>€&nbsp;20.00</td><td>€&nbsp;5</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td>Pink Roller Skates</td><td>€&nbsp;35.00</td><td>€&nbsp;10</td><td>Next day if ordered before 12.00</td></tr>
   <tr><td style="color:#666">Black Roller Skates *</td><td>€&nbsp;35.00</td><td>€&nbsp;10</td><td>Next day if ordered before 12.00</td></tr>
  </tbody>
</table>

---

Updated

as per comments to change to single column of 176px;

try this CSS:

html, body {margin: 0; padding: 0;}

table, thead, tbody, tr, th, td {display: block; text-align: left;}

table {width: 176px;}

thead {display: none;}

tr {
 margin: 10px 0; 
 border: 1px solid #000;
}

td:before {
 display: block;
 background: #eee;
 font-weight: bold;
}

td:before {content: "Item";}
td+td:before {content: "Price (Euro)";}
td+td+td:before {content: "Postage and Packaging (Euro)";}
td+td+td+td:before {content: "Estimated Delivery Time";}

which changes the display to this:

Updated Fiddle

Once you realise you can style a table in this way, i.e. the same as any other element - you can pretty much make it look how you want ;)