时间戳

首页 > 解决方案 > 表内中心 TH

html - 表内中心 TH

问题描述

试图<TH>在跨越两列的表中居中一个元素。无论我尝试什么，<TD>都不会动。

td {
  text-align: left;
  padding: 5px;
}

table {
  text-align: center;
}

.contacttable {
  margin-left: auto;
  margin-right: auto;
  background-color: #FCF0F2;
  border-style: solid;
  border-color: grey;
  padding: 10px;
  font-size: 16px;
  display: inline-block;
  width: auto;
}

th {
  text-align: center;
}
<table class="contacttable">
  <tr colspan="2">
    <th id="tablehead">Contact Me</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Email Address Here </td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td>Telephone Number Here</td>
  </tr>
</table>

我希望“联系我” TH 位于下面两列的中心？

表格截图

标签： htmlcsshtml-table

解决方案

用作colspan="2"该属性th（而不是tr）以使其跨越两列：

td {
  text-align: left;
  padding: 5px;
}

table {
  text-align: center;
}

.contacttable {
  margin-left: auto;
  margin-right: auto;
  background-color: #FCF0F2;
  border-style: solid;
  border-color: grey;
  padding: 10px;
  font-size: 16px;
  display: inline-block;
  width: auto;
}

th {
  text-align: center;
}
<table class="contacttable">
  <tr>
    <th id="tablehead" colspan="2">Contact Me</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Email Address Here </td>
  </tr>
  <tr>
    <td>Telephone</td>
    <td>Telephone Number Here</td>
  </tr>
</table>

推荐阅读