Wrap text in td set blank space in next td HTML table

Question

I have created one simple demo here in which I have shown the table with two td - one without text wrap, and one with wrap. But as you can see the first one shows perfectly fine, but the second shows space after first text and shown other td details after wrapped text how can I show it in one row?

.customtable tr,
.customtable td,
.customtable tbody,
.customtable th {
  border: 1px double black !important;
  border-bottom: 1px double black !important;
  border-top: 1px double black !important;
  border-right: 1px double black !important;
  border-left: 1px double black !important;
}

<table class="table table-responsive customtable">
  <thead>
    <tr>
      <th colspan="5" class="text-center Assessmentmainheader">
        ASSESSMENT

      </th>
    </tr>
    <tr>
      <th width="160" class="Assessmentheader text-center">Student Name</th>
      <th class="Assessmentheader text-center">Subjects</th>
      <th class="Assessmentheader text-center">Assessment</th>
      <th class="Assessmentheader text-center">Marks</th>
      <th class="Assessmentheader text-center">View</th>
    </tr>
  </thead>
  <tbody ng-repeat="asmnt in AssessmentList" class="ng-scope">
    <tr>
      <td rowspan="2">dasda asd sdasdas</td>
    </tr>
    <tr>
      <td class="text-center ">Mathematics</td>
      <td class="text-center">
        <span style="color: #fff">Add</span> </td>
      <td class="text-center">
        <a class="ng-scope">Add Marks</a>
      </td>
      <td class="marksnotview">
        <span>No View</span>
      </td>
      <td class="text-center">
        <a href="#"><i style="font-size:1.3em" class="fa fa-eye custompointer"></i></a>
      </td>
    </tr>
  </tbody>
  <tbody ng-repeat="asmnt in AssessmentList" style="height:350px; overflow-y:auto" class="ng-scope">
    <tr>
      <td rowspan="2">dasdasd asdas asdaddasdasdasdas</td>
    </tr>
    <tr>
      <td class="text-center ng-binding">Social Studies</td>
      <td class="text-center">
        <span style="color: #fff">Add</span>
      </td>
      <td class="text-center ng-scope">
        <a>Add Marks</a>
      </td>
      <td class="marksnotview">
        <span>No View</span>
      </td>
      <td class="text-center ng-hide">
        <a href="#"><i style="font-size:1.3em" class="fa fa-eye custompointer"></i></a>
      </td>
    </tr>
  </tbody>
</table>

I want to show all the wrapped text in one td with other td details with it. I tried but not able to solve it. Any fix for this?

Answer 1

Seems like the rowspan is causing issues. It looks like you want to remove the rowspan, then remove the extra rows.

.customtable tr,
.customtable td,
.customtable tbody,
.customtable th {
  border: 1px double black !important;
  vertical-align: top;
}

<table class="table table-responsive customtable">
  <thead>
    <tr>
      <th colspan="5" class="text-center Assessmentmainheader">
        ASSESSMENT

      </th>
    </tr>
    <tr>
      <th width="160" class="Assessmentheader text-center">Student Name</th>
      <th class="Assessmentheader text-center">Subjects</th>
      <th class="Assessmentheader text-center">Assessment</th>
      <th class="Assessmentheader text-center">Marks</th>
      <th class="Assessmentheader text-center">View</th>
    </tr>
  </thead>
  <tbody ng-repeat="asmnt in AssessmentList" class="ng-scope">
    <tr>
      <td>dasda asd sdasdas</td>
      <td class="text-center ">Mathematics</td>
      <td class="text-center">
        <span style="color: #fff">Add</span> </td>
      <td class="text-center">
        <a class="ng-scope">Add Marks</a>
      </td>
      <td class="marksnotview">
        <span>No View</span>
      </td>
      <td class="text-center">
        <a href="#"><i style="font-size:1.3em" class="fa fa-eye custompointer"></i></a>
      </td>
    </tr>
  </tbody>
  <tbody ng-repeat="asmnt in AssessmentList" style="height:350px; overflow-y:auto" class="ng-scope">
    <tr>
      <td>dasdasd asdas asdaddasdasdasdas</td>
      <td class="text-center ng-binding">Social Studies</td>
      <td class="text-center">
        <span style="color: #fff">Add</span>
      </td>
      <td class="text-center ng-scope">
        <a>Add Marks</a>
      </td>
      <td class="marksnotview">
        <span>No View</span>
      </td>
      <td class="text-center ng-hide">
        <a href="#"><i style="font-size:1.3em" class="fa fa-eye custompointer"></i></a>
      </td>
    </tr>
  </tbody>
</table>