Question

请参阅我的代码：

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

这是CSS：

#preview_table .user_def_col {
color: gray;
font-size: .8em;
}

#preview_table .mapped_col {
color: green;
font-size: .6em;
float: right;    
position: relative;
top: -10px;    
}

目前，我的映射！文本会破坏列标题名称的居中。我想知道是否可以将映射！文本覆盖在标题列名称上（例如年龄），而列名称仍然按单元格宽度居中？

Answer 1

你可以把“映射！”进入span并使用absolute positioning（父级单元格需要position:relative）

Answer 2

请检查以下代码。我更改了字体大小并为行添加了颜色，以便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>

<强> CSS：

#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;
}

叠加/重叠元素

2 个答案: