时间戳

首页 > 解决方案 > 用html和css制作表格，但没有对齐

html - 用html和css制作表格，但没有对齐

问题描述

我目前正在我网站的底部制作一张表格。有 3 列，我试图让它们对齐。我的 CSS 中也有 text-align 。但是，中间的列在右侧，表格中的框也是如此。我真的不知道是什么导致了这种情况以及如何解决它/更好的方法来解决这个问题。一些帮助将不胜感激！

.counties {
  text-align: center;
  font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
  font-size: 40px;
  color: white;
  background: #7d7d7d;
  border-radius: 40px;
  margin: 10px;
}
<table class="counties" style="width:100%">
  <tr>
    <th>Counties</th>
    <th>Cases</th>
    <th>Deaths</th>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
</table>

标签： htmlcss

解决方案

中心列不以表格为中心，因为表格会调整列的宽度以适应其内容。“国家”一词比“病例”或“死亡”长，因此该列更宽，将中间列推向右侧。

当table-layoutCSS 属性设置为时会发生这种情况auto，这是默认设置。要使列的宽度相等，请设置table-layout为fixed。

在下面的示例中，第一个表有table-layout: auto，第二个有table-layout: fixed。您可以看到，在第二个选项中，中心列位于表格的真正中间，正如我认为您所希望的那样。

table, th, td {
  border: 1px solid black;
}
table {
  text-align: center;
  border-collapse: collapse;
}
.table-1 {
  table-layout: auto;
}
.table-2 {
  table-layout: fixed;
}
<table class="table-1" style="width:300px">
  <tr>
    <th>Counties</th>
    <th>Cases</th>
    <th>Deaths</th>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
</table>

<table class="table-2" style="width:300px">
  <tr>
    <th>Counties</th>
    <th>Cases</th>
    <th>Deaths</th>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
  <tr>
    <td>example</td>
    <td>example</td>
    <td>example</td>
  </tr>
</table>

推荐阅读