在 td 中换行文本 在下一个 td HTML 表格中设置空白

Question

我在这里创建了一个简单的演示，其中我展示了带有两个td 的表格——一个没有文本换行，一个有换行。但是正如您所看到的，第一个显示非常好，但第二个显示第一个文本后的空格，并在包装​​文本后显示其他 td 详细信息如何在一行中显示它？

.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>

我想在一个td 中显示所有包装的文本以及其他td 详细信息。 我试过但无法解决。有什么解决办法吗？

Answer 1

似乎rowspan 引起了问题。看起来您想删除 rowspan，然后删除多余的行。

.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>