CSS break table and repeat first column

I am modifying a website that currently uses a <table> for a price list.

Because tables obviously don't break + wrap, on a mobile device the right hand side of the table disappears of the right side of the screen.

I'd like to use CSS to make this price list responsive, so that when the browser runs out of width it renders the next column underneath. This is simple enough if I stop using a single table and use float:left, but in this case I want the name of the cottage to be repeated (the first column) when a horizontal break occurs.

Is this possible? If so, how would I achieve it?