JSFiddle - React, Tailwind, and code Playground

by Luiz Vargas

HTML

<div class="content">
    <table>
        <tbody>
            <tr>
                <td class="headcol">
                    <div>
                         <h1>Title</h1> 
                         <h2>Some sub-title</h2> 
                    </div>
                    <ol>
                        <li>
                            <div>
                                 <h3>Item 1</h3> 
                                 <h3>Additional Information</h3> 
                            </div>
                        </li>
                        <li>
                            <div>
                                 <h3>Item 2</h3> 
                                 <h3>Additional Information</h3> 
                            </div>
                        </li>
                    </ol>
                    <div class="headcol-detail">
                        <div>more details</div>
                    </div>
                </td>
                <td style="background-color:red;width:40px;">cell 1</td>
                <td style="background-color:red;width:40px;">cell 2</td>
                <td style="background-color:red;width:40px;">cell 3</td>
                <td style="background-color:red;width:40px;">cell 4</td>
                <td style="background-color:red;width:40px;">cell 5</td>
                <td style="background-color:red;width:40px;">cell 6</td>
                <td style="background-color:red;width:40px;">cell 7</td>
                <td style="background-color:red;width:40px;">cell 8</td>
                <td style="background-color:red;width:40px;">cell 9</td>
                <td style="background-color:red;width:40px;">cell 10</td>
                <td style="background-color:red;width:40px;">cell 11</td>
                <td style="background-color:red;width:40px;">cell 12</td>
                <td style="background-color:red;width:40px;">cell 13</td>
                <td style="background-color:red;width:40px;">cell 14</td>
                <td...

CSS

.content {
    width: 600px;
    overflow-x:scroll;
}
.headcol {
    position: relative;
    background-color:blue;
}
.headcol-detail {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    background-color:red;
}
.headcol > div:first-child {
    padding: 10px;
	white-space: nowrap;
     border-width: 3px 3px 3px 3px;
    border-style: solid;
    border-color: navy;
}

.content tr::before {
  content: '';
  display: block;
}

.content td:first-child {
  position: absolute;
}
.headcol > ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: li 0;
	overflow-y: auto;
}

.headcol > ol > li {
    position: relative;
    padding: 10px;
    border-width: 0 3px 3px 3px;
    border-style: solid;
    border-color: navy;
}
.headcol > ol > li:before {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    content: counter(li);
    counter-increment: li;
    vertical-align: middle;
}
.headcol > ol > li > div {
    display: inline-block;
    /* Aligning this to the middle so the :before (number) can also be aligned middle */
    vertical-align: middle;
	white-space: nowrap;
}
h1 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 100%;
    font-stretch: semi-condensed;
    margin: 0;
    padding: 0;
}
h2 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 75%;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    
}
h3 {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 75%;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.overlay {
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: blue;
    z-index:1;
    /* This z-index must be lower than what is set for the expansion content */
    display: none;
}

JavaScript

$('td > *:not(div:first-child)').hide();

$('td > div:first-child').click(function () {
    $(this).siblings().toggle();
    $('.overlay').toggle();

    // Adjust the minimum height for the ordered list to ensure that 
    // there is sufficient detail space if there are too few list items
    if ($(this).siblings('ol').css('min-height') == '0px') {
        $(this).siblings('ol').css('min-height', '200px');
        $(this).parent().css('z-index', '2');
    } else {
        $(this).siblings('ol').css('min-height', 0);
        $(this).parent().css('z-index', '');
    }
  var tr= $(this).closest('tr');
  tr.height($('td:first', tr).height());
});

$('#myButton').click(function () {
    $('.content').width('900px');
    updateDetailWidths();
});

$('.content').bind('resize', function () {
    updateDetailWidths();
});

$(document).ready(updateDetailWidths());

function updateDetailWidths() {
  var mw= 0;
  $('.content td:first-child')
    .each(function() {
      mw= Math.max(mw, $(this).width());
      $(this).parent().height($(this).height());
    })
    .width(mw);
  $('<style>.content tr::before{width:'+mw+'px}</style>').appendTo('head');
  $('.headcol-detail').width($('.content').innerWidth()-mw);
}