JSFiddle - React, Tailwind, and code Playground

by Abinash Shaw

HTML

<section class="content">
            

<table>
        <tbody><tr>
        <td></td><td></td>
            <td><input style="width: 170px; float: right; margin: auto; display: block;" type="text" id="search" placeholder="Zoeken op Trefwoord"></td>
            </tr></tbody></table><div class="table-container"><table class="overzicht scroll" border="1" id="table" style="width: 100%;"><thead>
            <tr style="cursor: hand;">
                <th style="width: 100px;" class="left">Debnr</th>
                <th style="width: 100px;" class="left">Naam</th>
                <th style="width: 100px;" class="left">Adres</th>
                <th style="width: 50px;">Postcode</th>
                <th style="width: 100px;" class="left">Plaats</th>
                
                <th style="width: 100px;">Allin</th>
                <th style="width: 100px;">Basis</th>
                <th style="width: 100px;">Entry</th>
                <th style="width: 100px;">Klanten</th>

            </tr>
        </thead><tbody>        <tr class="cus1 R1" onclick=" $.post('getalles.php?ID=1&amp;A=** Nog toe te wijzen **', {}, function(data){  $('#chart_div').html(data);})" style="font-size: 14px;">
            
            <td style="width: 100px;" class="left">
                1
            </td>
            <td style="width: 100px" class="left">
                ** Nog toe te wijzen **
            </td>
            <td style="width: 100px;" class="left">
                
            </td>
            <td style="width: 50px;">
                
            </td>
            <td style="width: 100px;" class="left">
                
            </td>
             <td style="width: 100px;" class="left">
                
            </td>
             <td style="width: 100px;" class="left">
                
            </td>
             <td style="width: 100px;" class="left">
                
            </td>
              <td style="width: 100px;">
                <form method="POST"...

CSS

*{margin:0;}
#container1{
    height: 100%;
    width: 100%;
    border: 1px solid green;
    overflow: hidden;
}
.overzicht tbody {
    /* body takes all the remaining available space */
    flex: 1 1 auto;
    display: block;
    overflow-x: hidden;
}

.containers{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

html, body{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

.table-container {
    height: 573px;
}
table {
    display: flex;
    flex-flow: column;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-collapse: collapse;
}
.overzicht{
    height: 100%;
}
table thead {
    /* head takes the height it requires, 
    and it's not scaled when table is resized */
    flex: 0 0 auto;
    width: calc(100% - 0em);
}

table tbody tr {
    width: 100%;
     border-top: 1px solid rgba(222, 215, 215, 0);
    border-bottom: 1px solid rgba(222, 215, 215, 0);
}
table thead,
table tbody tr {
    display: table;
    table-layout: fixed;
}
h1, h2, h3{
    text-align: center;
    margin: 0px;
}
input { 
	border: none;
	outline: none;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.3);
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	
}
form{
    margin-bottom: 0px;
}

a{
    text-decoration: none;
    color: black;
}

.selected {
     border-top: 1px solid #bfbebe;
    border-bottom: 1px solid #bfbebe;
}

.left{
text-align: left;
}



li, ul{
    list-style: none;
    margin: 0px;
}
.treeview-menu>li:hover{
    border-left-color: #00a65a;
    
}