Table make <td> responsive

Question

I have three shares: facebook, google, twitter. In large screens it works ok, but in small ones twitter share hides behind the limits and I would like the item to autoposition himself to another line.

http://jsfiddle.net/ruhnq/46/

The jsfiddle above will probably work perfectly cool on your screen. But imagine you have a smaller one, this is how it looks: http://quirktools.com/screenfly/#u=http%3A//jsfiddle.net/ruhnq/46/&w=1024&h=600

<table style='border: 1px solid #ccc; float: right; width: 37%; display: block'>

How can I avoid this?

Answer 1

Don't use tables, use divs and floats instead

.social-container{
  border:1px solid #ccc;
  float:right;
}

.social-item{
  float:left;    
}

jsFiddle

Answer 2

maybe try: td {display:inline-block;}

Answer 3

Don't use tables for non tabular data.

You could wrap the buttons in a div, and give it a width.

For example:

.test { width: 25%; border:1px solid red; }

JSFiddle Demo