HTML带边框表格实现技能与星级对齐的技术问询

要实现技能名称与星级对齐且保留表格边框，你可以给每个技能名称添加一个固定宽度的内联容器，让星级从统一位置开始排列。修改后的代码如下：

<table border="1">
    <tr>
        <td><span style="display: inline-block; width: 120px;">Management</span>⭐⭐⭐⭐</td>
        <td><span style="display: inline-block; width: 120px;">OSHE Act</span>⭐⭐⭐</td>
    </tr>
    <tr>
        <td><span style="display: inline-block; width: 120px;">Accounting</span>⭐⭐⭐</td>
        <td><span style="display: inline-block; width: 120px;">Marketing</span>⭐⭐⭐⭐⭐</td>
    </tr>
</table>

原理说明 #

• 用<span style="display: inline-block; width: 120px;">包裹技能名称，inline-block属性让容器保持行内布局的同时支持设置宽度
• 统一宽度后，所有星级会从相同的水平位置开始显示，实现对齐效果
• 保留原表格的border="1"属性，维持边框样式

如果技能名称长度有变化，直接调整width的数值即可适配。

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