Question

如何使元素占据表格单元格的百分比宽度？当我尝试做一个百分比，比如70％时，它比包含的细胞大得多。 70％应小于含有细胞！这是我的页面的准系统示例。绝对定位对于我想做的某些分层是必要的。

HTML

<table>
 <tr>
  <td>
   <div>hello</div>
  </td>
  <td>
   <div>world</div>
  </td>
 </tr>
</table>

CSS

td {
 position: relative;
 width: 10em;
}

div {
 position: absolute;
 width: 70%;
}

Answer 1

马特·鲍尔的评论让我走上正轨。这是一些额外的标记。

HTML

<table>
 <tr>
  <td>
   <div class="container">
    <div class="bar">hello</div>
   </div>
  </td>
  <td>
   <div class="container">
    <div class="bar">world</div>
   </div>
  </td>
 </tr>
</table>

CSS

td {
 width: 10em;
}

.container {
 position: relative;
}

.bar {
 position: absolute;
 width: 70%;
}

填写表格单元格的百分比宽度

1 个答案: