JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/dynatable-docs-assets/css/jquery.dynatable.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://s3.amazonaws.com/dynatable-docs-assets/js/jquery.dynatable.js"></script>
<table id='mytable'>
  <thead>
      <tr><th>Num</th><th>ID</th><th>Acc#</th><th>Hsp num</th><th>Hsp bit score</th><th>Hsp score</th><th>Hsp e value</th><tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

#mytable {
    width: 100%;
}
#mytable th {
    background-color: blue;
    color: white;
    padding: 5px;
    border: 1px solid white;
    text-align: center;
}
td {
    border: 1px solid white;
    background-color: lightblue;
    color: black;
    text-align: center;
    padding: 5px;
}
tr {
    width: 100%;
}

JavaScript

var myarray = [ {
                 "Hit_num": "1",
                 "Hit_id": "gi|495426285|ref|WP_008150982.1|",
                 "Hit_accession": "WP_008150982",
                 "Hit_hsps": {
                              "Hsp": {
                                      "Hsp_num": "1",
                                      "Hsp_bit-score": "202.986",
                                      "Hsp_score": "515",
                                      "Hsp_evalue": "1.7033e-61"
                                      }
                              }
                 },
                {
                 "Hit_num": "2",
                 "Hit_id": "2i|495426285|ref|WP_008150982.1|",
                 "Hit_accession": "3WP_008150982",
                 "Hit_hsps": {
                              "Hsp": {
                                      "Hsp_num": "3",
                                      "Hsp_bit_score": "3202.986",
                                      "Hsp_score": "3515",
                                      "Hsp_evalue": "31.7033e-61"
                                     }
                              }
}];


for(var n=0; n<2; n++)
{
  var one = myarray[n].Hit_num;
  var two = myarray[n].Hit_id;
  var three = myarray[n].Hit_accession;
  var four = myarray[n].Hit_hsps.Hsp.Hsp_num;
  var five = myarray[n].Hit_hsps.Hsp.Hsp_bit_score;
  var six = myarray[n].Hit_hsps.Hsp.Hsp_score;
  var seven = myarray[n].Hit_hsps.Hsp.Hsp_evalue;
  fillrow(one, two, three, four, five, six, seven);
}

function fillrow(one, two, three, four, five, six, seven)
{
    $('tbody').append("<tr><td style='width:50px'>" + one +
                            "</td><td>" + two +
                            "</td><td>" + three +
                            "</td><td>" + four +
                            "</td><td>" + five +
                            "</td><td>" + six +
                            "</td><td>" + seven +
                            "</td></tr>");
}