[分享]css单元格右留空

在进行网页布局时，有时候需要设置表格单元格的样式，其中比较常用的是设置单元格的左右内边距来控制单元格的宽度。但是有时候如果需要使表格单元格的宽度略小于表格的宽度，即让单元格右边留出一定的空间，这时候就...

在进行网页布局时，有时候需要设置表格单元格的样式，其中比较常用的是设置单元格的左右内边距来控制单元格的宽度。

但是有时候如果需要使表格单元格的宽度略小于表格的宽度，即让单元格右边留出一定的空间，这时候就可以通过CSS控制单元格的宽度和外边距的方式来实现。

/* 设置表格单元格的样式 */
table {
  border-collapse: collapse; /* 合并单元格边框 */
  width: 100%; /* 设置表格宽度为100% */
}

td {
  padding: 10px 5px; /* 设置单元格的上下内边距10px，左右内边距5px */
}

td.space {
  width: 90%; /* 设置单元格宽度为表格宽度的90% */
  margin-right: 10%; /* 设置单元格右外边距为表格宽度的10%，即单元格右边留出10%的空间 */
} 

在HTML中使用class属性指定需要设置的单元格：

<table>
  <tr>
    <td>单元格1</td>
    <td class="space">单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td class="space">单元格4</td>
  </tr>
</table> 

通过以上的CSS代码和HTML代码可以设置表格单元格右边留出一定的空间，使得表格看起来更加美观。