如何对齐表格内容 HTML 表格答案

【问题标题】：How to align table content HTML table如何对齐表格内容 HTML 表格
【发布时间】：2019-01-24 13:58:02
【问题描述】：

我正在为一个项目使用 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

【问题讨论】：

为什么首先有两张表？让它成为一张桌子（删除中间的</table><table>），它应该很好并对齐！
@R.J. Aravind，你有一个有 4 个不同答案的问题。这些都没有真正解决您的问题？

标签： html css html-table

【解决方案1】：

首先你需要修复你的表格 html（我在下面做了）。同样在<tables>'s 中，您可以从<th>'s 中控制列宽。

所以应该是这样的：

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>

【讨论】：

这里我在滚动时冻结了表头，所以我需要两个表，一个用于表头，另一个用于表体。现在我想将表体与表头对齐@Oneezy
在这种情况下，使用数据表库datatables.net 之类的东西可能是更好的选择

【解决方案2】：

您可以将所有内容更改为 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>

【讨论】：

【解决方案3】：

关闭您的 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>

【讨论】：

@cmprogram 我已经编辑了答案，感谢您的建议:)
这里我在滚动时冻结表头，所以我需要两个表，一个用于表头，另一个用于表体。现在我想将表体与表头对齐@cmprogram

【解决方案4】：

你可以试试这个代码

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>

【讨论】：

【解决方案5】：

<html>
<head>
<title>HTML table</title>
</head>
<body>
 <table border="5" align="center" bgcolor="pink" width="30%">
            <Thead>
                <Tr bgcolor="yellow">
                    <Th>ID</Th>
                    <Th>Name</Th>
                    <Th>Branch</Th>
                    <Th colspan="2">Skillset</Th>
                    
                </Tr>
            </Thead>
        </body>
            <Tbody>
                <Tr>
                    <Td>201</Td>
                    <Td>Sam</Td>
                    <Td rowspan="2">CSE</Td>
                    <Td>CSS</Td>
                    <Td>html</Td>
                </Tr>
    
                    <Tr>
                        <Td>202</Td>
                        <Td>Jack</Td>
                        <Td>Java</Td>
                        <Td>J2EE</Td>
                    </Tr>
                
                
                        <Tr>
                            <Td>203</Td>
                            <Td>Harsh</Td>
                            <Td>Mech</Td>
                            <Td>TDrilling</Td>
                            <Td>Java</Td>
                        </Tr>
                    
                    
                            <Tr>
                                <Td>204</Td>
                                <Td>Ryan</Td>
                                <Td>ECE</Td>
                                <Td>Java</Td>
                                <Td>Python</Td>
                            </Tr>
                        </Tbody>
        </table>
        </html>

【讨论】：

【解决方案6】：

@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>

【讨论】：

感谢您的建议，我需要随后对齐表格。 @Asiya Fathima
我试图冻结表头，它奏效了。但是当我使用你的一些 CSS 代码来对齐表格内容时，它不起作用。请查看以下网址@Asiya Fathima jsfiddle.net/andrewwhitaker/fj8wM