JSFiddle - React, Tailwind, and code Playground

Shitty table behaviour example.

by nilloc

HTML

<div class="sizer"></div>

<table>
  <tr>
    <td>1</td>
    <td><div class="wider">box (300px wide)</div></td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

CSS

table{
  width:500px;
  height:500px;
  /* display:flex; */
  
}
tr{
  display:flex;
  /* flex-shrink:0; */
}
td{
  border:1px dotted red;
  flex:1;
  flex-shrink:0;
}
.wider{
  width:300px;
  background:#bada55;
}

.sizer{
  position:absolute;
  top:0;
  left:0;
  height:500px;
  width:500px;
  border:1px solid #aaa;
  z-index:0;
}