Question

我有一个表具有固定的标题，即它在tbody上具有滚动条，但是rowspan属性不起作用。我已经将Bootstrap 4用于表类，还使用了flex

css：-

#jobs-table tbody {
    display: block;
    max-height: calc(100vh - 356px);
    text-align: center;
    overflow-y: scroll;

}
#jobs-table tr {
    width: 100%;
    display: table;
    table-layout: fixed;
}
#jobs-table thead {
    flex: 0 0 auto;
    text-align: center;
    background-color: #4A90E2;
}
#jobs-table table {
    display: flex;
    flex-flow: column;
    width: 100%;
}
#jobs-table thead tr{
  width: calc(100% - 15px);
}

HTML：-

    <div class="table-responsive">
   <table class="table table-stripped" id="jobs-table">
      <thead>
         <tr>
            <th>Level No</th>
            <th>Question Id</th>
            <th>Answer</th>
            <th>Score</th>
            <th>Time Taken</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td rowspan="4">level</td>
            <td>5b28864e2eddc223ef5643fe</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b2884962eddc223ef564186</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b2886232eddc223ef564376</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b28864e2eddc223ef56439c</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td rowspan="5">level</td>
            <td>5b28867b2eddc223ef564478</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b2885db2eddc223ef564369</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b28867b2eddc223ef56445f</td>
            <td>WRONG</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b28867b2eddc223ef564464</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
         <tr>
            <td>5b28864e2eddc223ef5643b5</td>
            <td>CORRECT</td>
            <td>20</td>
            <td>20</td>
         </tr>
      </tbody>
   </table>
</div>

我无法弄清楚为什么行距不起作用以及是否有某种方式可以实现所需的输出？

我的预期输出是这样的：-

Answer 1

您的显示属性似乎是导致此问题的原因。我已经删除了两者，并得到了您想要的效果，请参阅修订后的CSS：

#jobs-table tbody {
    width: 100%;
    max-height: calc(100vh - 356px);
    text-align: center;
    overflow-y: scroll;
}
#jobs-table tr {
    width: 100%;
    table-layout: fixed;
}
#jobs-table thead {
    text-align: center;
    background-color: #4A90E2;
}
#jobs-table table {
    width: 100%;
}
#jobs-table thead tr{
  width: calc(100% - 15px);
}

Rowspan无法在我使用display：table的CSS中使用

1 个答案: