Can't reduce the width of like and +1 buttons

I am trying to set to Facebook like and Google +1 buttons on a page. However, they take too much width:

I am defining them as following:

<table id="plusOneButtons">
    <tr>
        <td id="fbLikeButton"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FLigatures.Net&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21&amp;appId=58053763610" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></td>
        <td id="googlePlusOneButton"><div class="g-plusone" data-size="medium"></div></td>
        <td id="twitterShareButton"><div><a href="https://twitter.com/share" class="twitter-share-button" data-via="LigaturesNet">Tweet</a></div></td>
    </tr>
</table>

The CSS is:

#fbLikeButton {
    width: 100px;
    background: red;
}

#googlePlusOneButton {
    width: 100px;
    background: greenyellow;
}

#twitterShareButton {
    width: 100px;
    background: aliceblue;
}

How can I set a proper width? I have already checked this question, but the solution does not work.

Update your CSS and include the following property for all ID's display: inline-block;

#fbLikeButton {
width: 100px;
background: red;
display: inline-block;}