Angular ngFor表格样式优化：单元格间距与CRN输入框水平排列

这两个都是Angular表格渲染里常见的样式小问题，我给你整理了具体的解决方法：

表格单元格的间距调整分两种场景，对应不同的CSS方案：

• 场景1：表格未设置边框合并（默认状态）
  直接给<table>元素使用border-spacing属性，这是表格原生的间距控制属性，比margin更靠谱（表格单元格默认不支持margin）：

table {
  /* 水平、垂直间距都设为10px；也可以分开写：border-spacing: 10px 5px; */
  border-spacing: 10px;
}

• 场景2：表格设置了border-collapse: collapse（边框合并）
  这种情况下border-spacing会失效，你可以通过给单元格加内边距或者透明边框来模拟间距：

/* 方案1：用内边距给单元格内部留空白 */
td, th {
  padding: 0 12px; /* 左右各12px间距，上下可按需调整 */
}

/* 方案2：用透明边框实现单元格之间的空白（适合需要物理间距的场景） */
td {
  border: 6px solid transparent;
}

既然你已经给输入框加了display: inline-block，可以通过以下几种方式实现对齐：

• 让输入框在单元格内水平居中
  直接给包含输入框的<td>设置文本对齐：

/* 给CRN输入框所在的td加个类，比如crn-cell */
.crn-cell {
  text-align: center;
}

配合Angular模板的写法：

<tr *ngFor="let item of yourData">
  <td class="crn-cell">
    <input type="text" [(ngModel)]="item.crn">
  </td>
  <!-- 其他单元格 -->
</tr>

• 让多个输入框在同一行对齐（避免基线错位）
  如果同一单元格里有多个输入框，加上vertical-align: middle可以避免因输入框高度不同导致的错位：

/* 给CRN输入框加个类，比如crn-input */
.crn-input {
  display: inline-block;
  vertical-align: middle;
}

• 统一输入框宽度，强化对齐视觉效果
  给输入框设置固定宽度，让所有CRN输入框看起来更整齐：

.crn-input {
  display: inline-block;
  width: 110px; /* 按需调整宽度 */
  box-sizing: border-box; /* 防止padding/border撑宽输入框 */
}

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