0

查看我的代码：

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

目前我的映射！文本损坏列标题名称的居中。我想知道是否可以叠加映射！标题列名称（例如Age）上的文本，而列名称仍以单元格宽度为中心？

4

2 回答 2

0

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

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;
}
​
于 2012-12-24T13:05:01.007 回答
0

你可以把“映射！” 进入span并使用绝对定位（父单元格需要有position:relative）

于 2012-12-24T12:46:19.917 回答