Question

我正在为一个项目使用HTML。在对齐两个表时需要帮助。表一包含表头，表二包含表主体。如何同步对齐两个表。

代码如下：

<body>

<h2>HTML Table</h2>

<table>
<thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  </table>
  <table>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  </tbody>
</table>

</body>

Here is the Demo

Answer 1

关闭您的 table 标记并再次打开它会创建两个不同的表，因此这些表将不会对齐。要对您的商品进行“对齐” ，您需要在同一表格中同时创建<thead>和<tbody>，如下所示：

    <body>

    <h2>HTML Table</h2>
    
    <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
      </thead>
    
      <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      </tbody>
    </table>
    
    </body>

Answer 2

首先，您需要修复表格html（下面已完成操作）。同样在<tables>中，您可以从<th>内控制列宽。

所以会是这样：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.company { width: auto; }
.contact { width: auto; }
.country { width: 100px; }

<table>
  <thead>
    <tr>
      <th class="company">Company</th>
      <th class="contact">Contact</th>
      <th class="country">Country</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

Answer 3

您可以将所有内容更改为div并进行处理。它可以更好地控制您的样式和代码。如上所述：

body {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.table-wrapper {
  display: table;
}

.table-header {
  font-weight: bold;
  border-bottom: 2px solid #CCC;
}

.table-row,
.table-header {
  display: table-row;
}

.table-row:nth-child(even) {
  background-color: #dddddd;
}

.table-row>div,
.table-header>div {
  display: table-cell;
}

.table-wrapper,
.table-row>div,
.table-header>div {
  border: 1px solid #dddddd;
  border-collapse: collapse;
  text-align: left;
  padding: 8px;
}

<body>

  <h2>HTML Table</h2>

  <div class="table-wrapper">
    <div class="table-header">
      <div>Company</div>
      <div>Contact</div>
      <div>Country</div>
    </div>
    <div class="table-row">
      <div>Alfreds Futterkiste</div>
      <div>Maria Anders</div>
      <div>Germany</div>
    </div>
    <div class="table-row">
      <div>Alfreds Futterkiste</div>
      <div>Maria Anders</div>
      <div>Germany</div>
    </div>
  </div>

</body>

Answer 4

@ R.J。 Aravind：编辑过的帖子请查看。

table {
     font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    display: contents;
}

td, th {
 border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  display: table-cell;
  width: 500px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
h2 {text-align: center; }

<h2>HTML Table</h2>

  <table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    </thead>
    </table>
    <table>
    <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    </tbody>
  </table>

Answer 5

您可以尝试使用此代码

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

<h2>HTML Table</h2>

<table style="width:100%">
  <thead>
    <tr>
      <th>COMPANY</th>
      <th>CONTACT</th>
      <th>COUNTRY</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>alfreds</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>alfreds</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

Answer 6

bool contains(List l, int x)
{
    return l && (l->info==x || contains(l->next,x));
}

如何对齐表格内容HTML表格

6 个答案: