html - 为什么不跨越行的 100% 宽度？HTML CSS

Question

我已经创建了一个基本的 HTML 表格，但我似乎无法让顶部<th>元素跨越其父<tr>元素（以及最终<table>元素）的 100% 宽度。

.my-card-table {
  width: 100%;
  border: 1px solid #D9D7D6;
  table-layout: fixed!important;
}

.table-top-heading {
  display: block;
  text-align: center;
}

.my-card-table-heading {
  background-color: #E9E9E9!important;
  font-family: "Proxima Nova Regular";
  color: #000000;
  font-size: 1rem;
  padding: 10px 5px 10px 5px;
}

.my-card-table-heading-inner {
  background-color: #E9E9E9!important;
  font-family: "Proxima Nova Regular";
  color: #000000;
  font-size: 1rem;
  text-align: left;
  padding: 10px 0 10px 30px
}

.my-card-table-row-grey {
  background-color: #F2F3F3!important;
  padding: 10px!important;
}

.my-card-table-row-white {
  background-color: #ffffff!important;
  padding: 10px!important;
}

..my-table-td {
  text-align: left;
  padding-left: 30px;
}

.my-card-link {
  color: #0e5b8b;
}

.my-card-link:hover {
  font-family: "Proxima Nova Bold";
  color: #0e5b8b;
}

.my-card-link-2 {
  color: #212529;
}

<table class="my-card-table">
  <tr class="table-top-heading">
    <th class="table-top-heading-header">HelloWorld</th>
  </tr>
  <tr class="my-card-table-heading">
    <th class="my-card-table-heading-inner">Teachers</th>
    <th class="my-card-table-heading-inner">School</th>
    <th class="my-card-table-heading-inner">Status</th>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
    <td class="my-table-td">Lincolnshire</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
    <td class="my-table-td">Buffalo Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
    <td class="my-table-td">Kenilworth</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
</table>

因此，当您运行该代码片段时 ^ 我想看到的是位于“教师、学校、状态”行上方的“helloWorld”。我不确定为什么它似乎只扩大了表格宽度的四分之一——这与table-layout: fixed我在<table>元素上设置的样式有关吗？

链接到 JSFiddle

标签： htmlcsshtml-table

Answer 1

两件事情：

1.）您需要将其添加colspan="3"为一个属性，th以使其跨越该表的所有三列。

2.) 你不应该使用display: block一个表格元素，不管那是td, th,tr还是别的什么。th默认情况下的显示设置是table-cell- 保持原样，否则表格最终不会是“真正的表格”（即单元格会失去其自动对齐和调整自己的方式）。

.my-card-table {
  width: 100%;
  border: 1px solid #D9D7D6;
  table-layout: fixed!important;
}

.table-top-heading {
  text-align: center;
}

.my-card-table-heading {
  background-color: #E9E9E9!important;
  font-family: "Proxima Nova Regular";
  color: #000000;
  font-size: 1rem;
  padding: 10px 5px 10px 5px;
}

.my-card-table-heading-inner {
  background-color: #E9E9E9!important;
  font-family: "Proxima Nova Regular";
  color: #000000;
  font-size: 1rem;
  text-align: left;
  padding: 10px 0 10px 30px
}

.my-card-table-row-grey {
  background-color: #F2F3F3!important;
  padding: 10px!important;
}

.my-card-table-row-white {
  background-color: #ffffff!important;
  padding: 10px!important;
}

..my-table-td {
  text-align: left;
  padding-left: 30px;
}

.my-card-link {
  color: #0e5b8b;
}

.my-card-link:hover {
  font-family: "Proxima Nova Bold";
  color: #0e5b8b;
}

.my-card-link-2 {
  color: #212529;
}

<table class="my-card-table">
  <tr class="table-top-heading">
    <th class="table-top-heading-header" colspan="3">HelloWorld</th>
  </tr>
  <tr class="my-card-table-heading">
    <th class="my-card-table-heading-inner">Teachers</th>
    <th class="my-card-table-heading-inner">School</th>
    <th class="my-card-table-heading-inner">Status</th>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
    <td class="my-table-td">Lincolnshire</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
    <td class="my-table-td">Buffalo Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
    <td class="my-table-td">Kenilworth</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
</table>