Make a div fill up the entire width and height of a table cell with unspecified dimensions

user_14495368 0
Viewed 540

table, th, td, div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}
div {
  writing-mode: vertical-rl;
  
  background-color: #ddd;
  border-color: #bbb;
}
<table>
  <tr>
    <td>one</td> <td>two</td> <td>three</td>
  </tr>
  <tr>
    <td rowspan="2"> <div>four</div> </td>
    
    <td>five</td> <td>six</td>
  </tr>
  <tr>
    <td>seven</td> <td>eight</td>
  </tr>  
</table>

The desired result is for the div in the table cell to look more like this:

enter image description here

Notice the "four" div fills the entire width and height of the table cell in the image but not in the code snippet.

There are questions similar to this that suggest using absolute positioning which doesn't work in this exact situation ( per my attempts ) on a table with unspecified width and height. Other answers say there is no way to do this without JavaScript. But those answers were from 2010. Any input would be much appreciated.

html-table css html
3 Answers

if you are okay with a few classes then you can achieve what you shown in the image.

table,
th,
td,
div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}

.spl {
  writing-mode: vertical-rl;
  border-style: none;
}

.inb {
  background-color: #ddd;
}
<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td rowspan="2" class="inb">
      <div class="spl">four</div>
    </td>

    <td>five</td>
    <td>six</td>
  </tr>
  <tr>
    <td>seven</td>
    <td>eight</td>
  </tr>
</table>

user_82335480

You could use jQuery as follows to get the (outer) width and height of that parent td and apply it to that div

$(document).ready(function() { 
  var cellwidth1 = $('.x1').outerWidth();
  var cellheight1 = $('.x1').outerHeight();
  $('.x2').css({
  'height': cellheight1,
  'width': cellwidth1
  });
});
* {
box-sizing: border-box;
}
table, th, td, div {
  font-family: Arial;
  padding: 1em;
  border-style: solid;
  border-collapse: collapse;
  text-align: center;
}
td.x1 {
  padding: 0;
}
div.x2 {
  writing-mode: vertical-rl;
  background-color: #ddd;
  border-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>one</td> <td>two</td> <td>three</td>
  </tr>
  <tr>
    <td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
    
    <td>five</td> <td>six</td>
  </tr>
  <tr>
    <td>seven</td> <td>eight</td>
  </tr>  
</table>

user_56416690

After trying many things it seems that as of 2020 stretching a div to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.

The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )

dev-sbx.github.io/x

enter image description here

The only real solution here seems to be using a CSS Grid layout opposed to an HTML table.

user_144953680
Related