html - 如何在将鼠标悬停在元素上时阻止其他表格元素向右移动

Question

我有一个链接表，当我将鼠标悬停在它们上面时，它们应该会变粗。它工作正常，但它会将元素推向右侧。我该如何解决？

PS:我认为我的 CSS 很糟糕。你认为我应该改变它以摆脱这些问题吗？

              <table class="table" id="right-personal">
                    <tr class="left">
                        <td>
                            <img class="icon" src="img/twitter_alt.png"/>
                            <a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
                        </td>
                        <td>
                            <img class="icon" src="img/facebook.png"/>
                            <a href="http://facebook.com/ozmen.b">facebook.com/ozmen.b</a>
                        </td>
                    </tr>

                    <tr class="right">
                        <td>
                            <img class="icon" src="img/quora.png"/>
                            <a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
                        </td>
                        <td>
                            <img class="icon" src="img/github_alt.png"/>
                            <a href="http://github.com/bozmen">github.com/bozmen</a>
                        </td>
                    </tr>
                </table>

http://jsfiddle.net/XxLeY/

Answer 1

尝试在 td 元素上设置固定宽度。