HTML 表格中如何实现指定表头单元格靠右对齐

问题原因 #

• 你当前的text-align: right写在了行内元素<a>上，该属性只有设置在块级父元素上才能实现内部内容对齐效果，行内元素设置不生效
• 导航栏内的<table>没有设置100%宽度，默认会根据内部内容总宽度自适应，就算单元格对齐属性生效也没有多余空间让最后一个内容靠右展示

解决方法 #

修改两处代码即可：

1. 给<table>标签添加样式width: 100%，让表格占满整个导航栏的宽度
2. 把<a>标签上的text-align: right样式移除，加到它外层的最后一个<th>标签上

修改后的核心代码片段如下：

<div id="navigation-bar">
    <!-- 给table添加100%宽度样式 -->
    <table style="width: 100%;">
        <tr>
            <th><img src="https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" height="50px" width="50px"></th>
            <th><a href="/home" title="Home">Home</a></th>
            <th><a href="/about" title="About Me">About Me</a></th>
            <th><a href="/languages" title="Languages">Languages</a></th>
            <th><a href="/work" title="Previous Work">Previous Work</a></th>
            <!-- 给最后一个th添加右对齐样式 -->
            <th style="text-align: right;"><a href="https://puginarug.com" title="Beautiful Website">An Amazing Website</a></th>
        </tr>
    </table>
</div>

内容的提问来源于stack exchange，提问作者killrebeest