remove that has and make sub header

Question

am working on an application that reads data from servers that I do not have control over but I need to style the front end on this table to look like the others. the table look

Answer 1

I believe the following function accomplishes what you want by doing:

1. Loop through all <tr>
2. Get all the <td> inside
3. Store the <td> at index 1 (Description)
4. Filter the remaining <td> collection and get the ones that just contain  
5. If all are empty, remove them and adjust the properties of the remaining <td>

$(function() {
  $("table tr").each(function() {
    var tds = $(this).find("td"); //find all td
    var descriptionTD = tds.eq(1); //get the td for the description
    
    //get the remaining tds that only contain " "
    var emptytds = tds.not(descriptionTD).filter(function() {
      return $(this).html() === " ";
    });
    
    //if all the remaing tds are empty
    if (emptytds.length === tds.length - 1) {
      emptytds.remove();
      descriptionTD.prop("colspan", tds.length).prop("width", "100%");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="30%">Date</td>
    <td width="40%">Description 1</td>
    <td width="17%">Result</td>
    <td width="15%">Range</td>
    <td width="8%">Comments</td>
  </tr>
  <tr>
    <td width="30%">&nbsp;</td>
    <td width="40%">Description 2</td>
    <td width="17%">&nbsp;</td>
    <td width="15%">&nbsp;</td>
    <td width="8%">&nbsp;</td>
  </tr>
  <tr>
    <td width="30%">Date</td>
    <td width="40%">Description 3</td>
    <td width="17%">Result</td>
    <td width="15%">Range</td>
    <td width="8%">Comments</td>
  </tr>
  <tr>
    <td width="30%">&nbsp;</td>
    <td width="40%">Description 4</td>
    <td width="17%">&nbsp;</td>
    <td width="15%">&nbsp;</td>
    <td width="8%">&nbsp;</td>
  </tr>
</table>