JSFiddle - React, Tailwind, and code Playground
HTML
<table class="outer" width="100%">
<tr>
<th>F1</th>
<th>F2</th>
<th>F3</th>
<th>F4</th>
<th>F5</th>
</tr>
<tr class="APIMethodEntryPoint">
<td>06/02/2015</td>
<td>12:54:59.322</td>
<td></td>
<td>Some method entry point here</td>
<td></td>
</tr>
<tr>
<td>06/02/2015</td>
<td>12:54:59.391</td>
<td></td>
<td>Log Line 1</td>
<td></td>
</tr>
<tr style="font-size:75%" bgcolor="LightBlue">
<td><i>06/02/2015</i>
</td>
<td><i>12:54:59.638</i>
</td>
<td><i></i>
</td>
<td>
<label>
<input type="checkbox" />
<div class="content"><span class="hidden"><i>========== Settings For App (Expands) ==========<BR></b><?xml version="<b style="color:red">1.0</b>" encoding="<b style="color:red">utf-8</b>"?><b style="color:red"><BR></b><App_Settings xmlns:xsi="<b style="color:red">http://www.w3.org/2001/XMLSchema-instance</b>" xmlns:xsd="<b style="color:red">http://www.w3.org/2001/XMLSchema</b>"><b style="color:red"><BR> </b><Set1 /><b style="color:red"><BR> </b><Set2><b style="color:red">192.168.1.10</b></Set2><b style="color:red"><BR> </b><Set3><b style="color:red">11111</b></Set3><b style="color:red"><BR> </b><Set4><b style="color:red">1.1.1.1</b></Set4><b style="color:red"><BR> </b><Set5><b style="color:red">12121</b></Set5><BR></App_Settings></i></span>
</div>
<label>
</td>
<td><i></i>
</td>
</tr>
<tr>
<td>06/02/2015</td>
<td>12:55:00.3</td>
<td></td>
<td>
<label>
<input type="checkbox" />
<div class="content"><span class="hidden"></b>(Click to expand)<BR><?xml version="<b...
CSS
.outer {
width:100%;
border: 2px solid black;
align:center;
}
.outer th {
font-weight: bold;
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000000;
}
.outer td {
border-width: 1px;
padding: 2px;
border-style: solid;
border-color: #000000;
}
.outer td:nth-child(1), .outer td:nth-child(2), .outer td:nth-child(5) {
width: 10%;
}
.outer td:nth-child(3) {
width: 5%;
}
.outer td:nth-child(4) {
width: 65%;
overflow: hidden;
}
.APIMethodEntryPoint {
background-color: Yellow;
}
.content {
height:15px;
width:600px;
overflow:hidden;
text-overflow:hidden;
}
input[type='checkbox'] {
visibility: hidden;
position: absolute;
}
input[type='checkbox']:checked + .content {
height: auto;
width: auto;
}