JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<table id="my_table">
<thead>
<th>Heading 1</th>
<th>Heading 12</th>
<th>Heading 123</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading 345</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading 456</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading 543</th>
<th>Heading</th>
<th>Heading 3456</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</thead>
<tbody>
<tr>
<td>data dsgdfg</td>
<td>data</td>
<td>data</td>
<td>data fgfdhgfh hghg dfgfdg</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data dsfsdfgdsfg dfdsf</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data data</td>
<td>data</td>
<td>data</td>
<td>data data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data data</td>
...
CSS
#container{
width:700px;
height:300px;
overflow:scroll;
}
#my_table th{
background-color:#DCDCDC;
position:fixed;
width:100%;
}
#my_table td,th{
border:1px solid black;
border-collapse:collapse;
}
#my_table th{
padding:5px;
}
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
.heighlight{
background-color:gray;
}
#append{
background-color:gray;
color:white;
}
}
JavaScript
$(document).ready(function(){
$("#my_table td").live('click',function(){
$(this).toggleClass("heighlight");
});
$("#append").live('click',function(){
$(".heighlight").append("<span> DETAILS APPENDED HERE</span>");
});
});