css单元格右对齐 |css优化工具

css left动画，css 限制移动范围，css 列表选择器，css两种按钮，js html css先学哪个，css制作一个圆环，css优化工具 css单元格右对齐 |css优化工具

table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
td.right {
text-align: right;
}

在上面的代码中，大家首先设置了表格为100%宽度并合并边框，然后设置表格行的单元格边框为1像素的灰色边框，内边距为8像素，并且文本内容默认是居左对齐的。现在，大家将单元格类.right的文本对齐方式设置为居右对齐。

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>收入</th>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>北京</td>
<td class="right">6000</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
<td class="right">8000</td>
</tr>
</table>

在表格的HTML代码中，大家应用了类.right，这样大家就可以为表格中需要右对齐的单元格应用这个类。

总之，CSS单元格右对齐是一种非常简单的实现表格布局的方式，大家只需要在CSS中设置单元格的文本对其方式即可。