JSFiddle - React, Tailwind, and code Playground

by Samadhan Gaikwad

HTML

<div id="UI_Autotest_Dashboard_14734" align=center x:publishsource="Excel">

<table>
 <col width=116 style='mso-width-source:userset;mso-width-alt:4242;width:87pt'>
 <col width=77 style='mso-width-source:userset;mso-width-alt:2816;width:58pt'>
 <col width=72 style='mso-width-source:userset;mso-width-alt:2633;width:54pt'>
 <col width=56 style='mso-width-source:userset;mso-width-alt:2048;width:42pt'>
 <col width=77 style='mso-width-source:userset;mso-width-alt:2816;width:58pt'>
 <col width=72 style='mso-width-source:userset;mso-width-alt:2633;width:54pt'>
 <thead>
 <tr height=27 style='height:20.25pt'>
  <td height=27 class=xl7114734 colspan=3 width=265 style='height:20.25pt;
  width:199pt'>Autotests<font class="font514734"> (AS OF 13-Jul-2019, 07:37 PM)</font></td>
  <td class=xl7214734 width=56 style='width:42pt'>&nbsp;</td>
  <td class=xl7214734 width=77 style='width:58pt'>&nbsp;</td>
  <td class=xl7214734 width=72 style='width:54pt'>&nbsp;</td>
 </tr>
 <tr height=27 style='height:20.25pt'>
  <td height=27 class=xl7014734 style='height:20.25pt;border-top:none'>Total
  In-Progress</td>
  <td class=xl6614734 style='border-top:none;border-left:none'>2</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
 </tr>
 <tr height=27 style='height:20.25pt'>
  <td height=27 class=xl7014734 style='height:20.25pt;border-top:none'>Total
  Submitted</td>
  <td class=xl6714734 style='border-top:none;border-left:none'>3</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
  <td class=xl6914734 style='border-top:none'>&nbsp;</td>
 </tr>
 <tr height=27 style='height:20.25pt'>
  <td height=27 class=xl7014734 style='height:20.25pt;border-top:none'>Total
  Blocked</td>
  <td...

CSS

table {
  width: 100%;
}

table, td {
  border-collapse: collapse;
  border: 1px solid #000;
}

thead {
  display: table; /* to take the same width as tr */
  width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

tbody {
  display: block; /* to enable vertical scrolling */
  max-height: 200px; /* e.g. */
  overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

th, td {
  width: 33.33%; /* to enable "word-break: break-all" */
  padding: 5px;
  word-break: break-all; /* 4. */
}

tr {
  display: table; /* display purpose; th's border */
  width: 100%;
  box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

td {
  text-align: center;
  border-bottom: none;
  border-left: none;
}