JSFiddle - React, Tailwind, and code Playground

by Steve Muchow

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped inbox-outer-table">
    <thead class="inbox-outer-head">
    <tr>
        <th style="width:10%;">Make</th>
        <th style="width:20%;">Model</th>
        <th style="width:40%;">Color</th>
        <th style="width:30%;">Year</th>
    </tr>
    </thead>
    <tbody class="inbox-outer-body">
    <tr>
        <td style="width:10%;"  class="">Ford</td>
        <td style="width:20%;"  class="">Escort</td>
        <td style="width:40%;"  class="">Blue</td>
        <td style="width:30%;"  class="">2000</td>
        <td style="width:100%;" class="inbox-hide-row">
          <table class="inbox-embedded-table">
          <tbody>
            <tr>
            <td class="yellow">Item 1</td>
            <td>Item 2</td>
            </tr>
            <tr>
            <td>Item 3</td>
            <td>Item 4</td>
            </tr>
            </tbody>
          </table>
        <p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
        It has survived not only five centuries, but also the leap into electronic typesetting.</td>
    </tr>
    <tr>
        <td style="width:10%;"  class="">Ford</td>
        <td style="width:20%;"  class="">Escort</td>
        <td style="width:40%;"  class="">Blue</td>
        <td style="width:30%;"  class="">2000</td>
        <td style="width:100%;" class="inbox-hide-row">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic...

CSS

table {
            width: 100%;
        }

        .inbox-outer-head, .inbox-outer-body, thead, tbody, tr, td, th { display: block; }

        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            height: 30px;

            /*text-align: left;*/
        }

        .inbox-outer-table thead th {
            height: 40px;
        
            text-align: left;
        }

        tbody {
            height: 220px;
            overflow-y: auto;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            /* width: 23.2%; */
            float: left;
        }
        
     .inbox-hide-row {
      display: none;
    }
    
    .inbox-outer-table2222 {
       background: pink;   
    }
    
    .inbox-outer-body2222 {
        background: wheat;
    }
    
    .inbox-embedded-table {
        /* margin: 0px; */
        padding: 0;
        /* background: grey; */
    }
    .inbox-embedded-table tbody {
        height: 100%;
    },
    .inbox-embedded-table tr td {
      background: yellow;
      color: red;
    }
    .yellow {
      background: yellow;
      
    }