Question: I have a webpage that lists items. The default template uses a table for that, which i find very appropriate. In this table however, there is one column that contains much more text than the others:

![enter image description here](https://i.stack.imgur.com/Xg2g2.png)

While that works out on a large screen, it is very annoying to read on a small screen:

![enter image description here](https://i.stack.imgur.com/rPFrl.png)

In order to use the available space better, I can only think of a fake-table layout using divs. I did a prototype, using bootstrap grid layout, that looks like a table row on large screens, but has a different layout on small and extra small screens:

![enter image description here](https://i.stack.imgur.com/I0Myr.png)

While that improves the readability of the text by using the full width, I cannot use the utilities I've got for tables any more, and it breaks the user experience in subtle ways. For example, I use a nice script that enables sorting at the client. But that works only on real tables. (Also, there are small inconsistencies and visual differences between real tables and fake tables)

Is there any way that I can reformat a table row into a multi-line container similar to the one in the last image?

FYI: I am using jquery 2.1.1, Bootstrap 3.2.0.1 as GUI Framework and asp.net MVC on the server.

Bootply is here: <http://www.bootply.com/pRehwTai4G>

Edit: in case that did not come out clear enough: I want to keep the `<tr>` and `<td>` tags but style them similar to the divs. I do not want to replace the table with divs.

Answer: 
You could take a look at [Responsive data tables](http://css-tricks.com/responsive-data-table-roundup/). If that does not suit your needs, you could use JavaScript to re-create your table views as divs. This would be the easiest if you can get table data as JSON, which would be transformed into either tables or divs - depending on resolution. If you can't have it as JSON, you can always use jQuery's html() or text() to get the data from table cells and re-draw into divs.
Thanks Pete, I used your solution with a small modification. (using a class 'br' to break a row and continue with the TDs.)

```
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.calculator br {display:none;width:0;} 
.calculator tr td.br {display:none} 

@media all and (max-width:768px) {
.calculator tr {display: table;width:100%;} 
.calculator td {width:50%;}           
.calculator th {width:50%;}
.calculator tr td.br {display:table-row;} 
.calculator tr th.br {display:table-row;}             
}
</style>

<table class="calculator" style="width:100%">
  <tr>
<th>Firstname a</th><th>Lastname</th>
<th class="br">Age</th>
  </tr>
  <tr>
    <td>Jilldfs fds</td><td>Smith</td><td class="br"></td><td>50</td><td>50</td>
  </tr>
  <tr>
    <td>Eve</td><td>Jackson</td><td class="br"></td><td>94</td><td>94</td>
  </tr>
</table>

```