Html 覆盖/重叠元素

请参阅我的代码：

<table id="preview_table">
<thead>
<tr>
  <th class="not_mapped_style" style="display: none; text-align: center;">id</th>
  <th init_value="Name" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">DisplayName</div>
      <div class="user_def_col">(user defined)</div>
  </th>
  <th init_value="Email" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">PrimaryEmail</div>
      <div class="user_def_col">(user defined)</div>
  </th>
  <th init_value="Age" style="text-align: center;" class="">
      <div class="mapped_col">mapped!</div>
      <div class="col_name">Age</div>
      <div class="user_def_col">(user defined)</div>
  </th>
</tr>
</thead>
<caption>List</caption>
<tbody>
<tr>
  <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
  <td class="" property_value="user" property_name="DisplayName" align="center">user</td>
  <td class="" property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
  <td class="" property_value="69" property_name="Age" align="center">69</td>
  <td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>  
</tbody>

---

当前我的已映射文本会破坏列标题名称的居中。我想知道是否可以覆盖贴图标题列名上方的文本（例如，Age），而列名在宽度上仍由其单元格居中？

您可以将“mapped！”放在

span

中并使用（父单元格需要有

位置：relative

）

请检查以下代码。我更改了字体大小并为行添加了颜色，这样UI就可以正常显示

<table id="preview_table">
<caption>List</caption>
<thead>
<tr>
  <th class="not_mapped_style" style="display: none; text-align: center;">id</th>
  <th init_value="Name" style="text-align: center;" class="">
      <div class="col_name">DisplayName</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
  <th init_value="Email" style="text-align: center;" class="">
      <div class="col_name">PrimaryEmail</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
  <th init_value="Age" style="text-align: center;" class="">
      <div class="col_name">Age</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
</tr>
</thead>
<tbody>
<tr>
  <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
  <td class="" property_value="user" property_name="DisplayName" align="center">user</td>
  <td class="" property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
  <td class="" property_value="69" property_name="Age" align="center">69</td>
  <td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>  
</tbody>
</table​>

---

在这种情况下，所有我的“映射！”（现在是4）将被放置在同一个位置。如果每个父项都有

位置：相对的，则不是这样，在这种情况下是
。然后由您决定如何设置样式和位置，但这将允许您将“映射”放置在与其父项相对的同一位置1）确定，但即使在这种情况下，映射位置也将取决于列名文本，因此将放置在标题单元格的不同位置；2） 即使使用position:relative for th，这也不起作用-我所有的“mapped！”都是相对整个页面定位的，而不是th单元格！我在
中将“mapped！”绝对定位在右侧，这很奇怪，但对我来说不起作用。可能是因为我在父元素中有绝对/相对定位元素？它不起作用。1） 尝试定位映射！！！到与列名相同的行-它将不起作用；2） 这里的关键CSS解决方案是什么？3） 为什么要将粘贴的我的代码复制到你的答案中？有3个html更改。我移动了地图！！俯冲下去。而且还做了一些css更改。你检查过前面评论中的小提琴了吗？是的，我检查过了。它的HTML结果混乱，元素重叠，无法以自定义方式定位。
<table id="preview_table">
<caption>List</caption>
<thead>
<tr>
  <th class="not_mapped_style" style="display: none; text-align: center;">id</th>
  <th init_value="Name" style="text-align: center;" class="">
      <div class="col_name">DisplayName</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
  <th init_value="Email" style="text-align: center;" class="">
      <div class="col_name">PrimaryEmail</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
  <th init_value="Age" style="text-align: center;" class="">
      <div class="col_name">Age</div>
      <div class="user_def_col">(user defined)</div>
      <div class="mapped_col">MAPPED!!!!</div>
  </th>
</tr>
</thead>
<tbody>
<tr>
  <td style="display: none;" property_value="0" property_name="id" align="center">0</td>
  <td class="" property_value="user" property_name="DisplayName" align="center">user</td>
  <td class="" property_value="admin@domain.com" property_name="PrimaryEmail" align="center">admin@domain.com</td>
  <td class="" property_value="69" property_name="Age" align="center">69</td>
  <td class="" property_value="+722616807" property_name="Hand_Phone" align="center">+722616807</td>
</tr>  
</tbody>
</table​>

#preview_table .user_def_col {
color: gray;
font-size: 15px;
}

#preview_table .mapped_col {
color: green;
font-size: 12px;
position: relative;
    margin-top: -20px;
    opacity: 0.5;
}
tr
{
    border: 1px solid red;
}
​