Question

我已经创建了一个包含一些数据的表，当我添加display: block并使用堆栈溢出找到的解决方案对其进行修复时，我的表被压缩了，这是一个错误： {3}}。但是，这给了我另一个显示错误，这使我的桌子上的第一列变为100％的宽度，而其他列受到挤压。

任何有关如何解决此问题的建议/帮助，将不胜感激。

表的外观；

<tr> squeezed when <tbody> is display:block

    #requestContents tr{
        page-break-inside: avoid !important;
    }
    
    #requestContents td{
        width: 100% !important;
    }

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
      <table class="table table-bordered table-condensed" id="requestContents" style="display: block; height: 250px; overflow-y: scroll">
          <thead>
            <tr>
              <th>Request ID</th>
              <th>Request Type</th>
              <th>Blood Type</th>
              <th>Notice</th>
              <th>Request Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Dummy Dat</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
            <tr>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
            <tr>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
          </tbody>
        </table>

Answer 1

    #requestContents thead,#requestContents tbody{
        display:table; width:100%;

    }

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
      <table class="table table-bordered table-condensed" id="requestContents" style="display: block; height: 90px; overflow-y: scroll">
          <thead>
            <tr>
              <th width="20%">Request ID</th>
              <th width="20%">Request Type</th>
              <th width="20%">Blood Type</th>
              <th width="20%">Notice</th>
              <th width="20%">Request Date</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Dummy Dat</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
            <tr>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
            <tr>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
              <td>Dummy Data</td>
            </tr>
          </tbody>
        </table>

显示：压块台

1 个答案: