htmlcsstwitter-bootstrap

Table cell child item (div) not able to have the same height as the table cell

I have a table with Bootstrap 5 if that matters. The th element has a height of 195 px; this height is because some other cell in the same row has some text, if that matters. The screenshot below has the css for the th itself. I do not have a customized class for it.

enter image description here

The problem is that I want the child element in the th element to have the same height as the th. But only the width 100% works. Setting the height as 100% makes the div 2 px tall as shown below

enter image description here

Here's basically what I have in code. How can I make that div to have the same height as the th? Note that I still want the th's height to be decided by the tallest cell in the current row and just want the div to have the exact same size of the th

<table class="table table-bordered">
  <thead class="table-light">
    <tr>
      ...
    </tr>
  </thead>
  <tbody>
    <tr style="height:150px">
      <th class="fw-light" scope="row">...</th>
      <th scope="col">
        <div style="width:100%; height 100%;" class="border"></div>
      </th>
    </tr>
  </tbody>
</table>
Solution

  • Tables don't work like that!
    If you're looking for a workaround and the div will only have text, you can use the :before element. Otherwise, build tables using grid or javascript.

    th {
  position: relative;
  padding: 4px 8px;
  &[data-text] {
    &:before {
      content: attr(data-text);
      visibility: hidden;
    }
  }
  div {
    position: absolute;
    inset: 0;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
    <table>
  <tr>
    <th>Lorem<br> ipsum.</th>
    <th data-text="Lorem">
      <div>Lorem</div>
    </th>
    <th>Lorem</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>