时间戳

首页 > 解决方案 > 有没有办法对齐 HTML 表格中的列？

html - 有没有办法对齐 HTML 表格中的列？

问题描述

我正在尝试在 Angular 项目的开头创建一个基本表单，包括一个表格，但我无法让列对齐。

<table>我已经用 HTML元素的样式尝试了各种排列方式<table>，<tr>,,,width , 'float' etc., and have tried using vertical bars`。

我的代码大量借鉴了 W3Schools 页面https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro，所以奇怪的是它没有对齐（不仅列不对齐，而且交替行着色也不起作用）。

<style>
  table {
    border-collapse: collapse;
    width: 5%;
  }

  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    width: 50%;
  }

  tr {
    width: 100%;
  }

  tr:nth-child(even) {
    background-color: #522a2a;
  }
</style>

<form style="margin-left: 2%; margin-right: 2%">
  <h3>Form</h3>
  <table>
    <tr>
      <th>Category</th>
      <th>Input</th>
    </tr>
    <div *ngFor="let key of memberKeys">
      <tr>
        <td>{{key}}</td>
        <td><input type="text" [(ngModel)]="member[key]" [ngModelOptions]="{standalone: true}"/></td>
      </tr>
    </div>
  </table>
  <button type="submit">Submit</button>
</form>

不知道为什么列不对齐，行不交替背景颜色。非常感谢您的建议！

标签： htmlcssangular

解决方案

表需要一个div有效的子元素，例如tr：

<table>
    <tr>[...]</tr>
    <div *ngFor="let key of memberKeys">

尝试将 div 移动到另一个位置，以便表行都是同级的。

推荐阅读