Question

How do I make an element take up a percentage width of a table cell? When I attempt to do a percentage, say 70%, it grows much larger than the containing cell. 70% should be smaller than the containing cell! Here’s a barebones example of my page. The absolute positioning is necessary for some layering I want to do.

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

Matt Ball’s comment got me on the right track. It’s some extra markup.

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