html - 表体宽度不适合表头

Question

我正在使用水平和垂直滚动的桌子上工作。水平和垂直滚动工作正常，但我面临一个问题 table body width is not fit with table header 。我也会分享它的代码，有人可以帮我解决这个问题。谢谢

JSFiddle 链接：https ://jsfiddle.net/1w5vgjfm/2/

   

 table {
  border-collapse: collapse;
  width: 100%;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #EFEFEF;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

   <table class="table table-striped"><thead><tr><th>ID</th><th>Project Name</th><th>Type</th><th>Reservation Amount</th><th>Down Payment</th><th>Installment Plan</th><th>Possession Charges</th><th>Monthly Installaments</th><th>Category Charges</th><th>Rent Available </th><th>Full Payment Discount</th><th>Custom Field</th><th>Date Created</th><th># of Floors</th><th># of Units</th><th>Actions</th></tr></thead><tbody><tr><td>114</td><td>New Mall 2 </td><td>Mall</td><td>4888</td><td>1 %</td><td>7 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>3</td><td>8</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>111</td><td>New Mall 1 </td><td>Mall</td><td>4888</td><td>1 %</td><td>7 Year</td><td>60 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>field 1</span><span>, field 2</span><span>, field 3 </span></td><td>2020-07-21</td><td>5</td><td>75</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>112</td><td>New Mall 00 </td><td>Mall</td><td>4888</td><td>1 %</td><td>7 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>1</td><td>50</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>119</td><td>New Project 3 </td><td>Mall</td><td>4888</td><td>1 %</td><td>7 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>0</td><td>0</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>113</td><td>New Mall 6 </td><td>Mall</td><td>4888</td><td>1 %</td><td>7 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>2</td><td>3</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>120</td><td>New Mall 7 </td><td>Mall</td><td>50</td><td>1 %</td><td>10 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>30 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>0</td><td>0</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>121</td><td>New Mall 8 </td><td>Residential</td><td>340000</td><td>2 %</td><td>10 Year</td><td>30 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>5000 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-21</td><td>13</td><td>1</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>123</td><td>New Mall 4 </td><td>Mall</td><td>787</td><td>1 %</td><td>7 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>10 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-22</td><td>0</td><td>0</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>126</td><td>New Project </td><td>Hotel</td><td>45</td><td>2 %</td><td>5 Year</td><td>20 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>30 %</td><td><span>field 1</span><span>, field 2</span></td><td>2020-07-22</td><td>5</td><td>0</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr><tr><td>127</td><td>New Mall 2 </td><td>Mall</td><td>45</td><td>1 %</td><td>5 Year</td><td>10 %</td><td>Yes</td><td>Yes</td><td>Yes</td><td>50 %</td><td><span>custom field 1</span><span>, custom field 2</span></td><td>2020-07-23</td><td>1</td><td>0</td><td><div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span><span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span></div></td></tr></tbody></table>

标签： htmlcss

Answer 1

您可以简单地使用display: inline-block而不是block. 这样您就拥有了Horizontal and vertical scroll（如您所愿），您将看到这些项目。

演示

table {
  border-collapse: collapse;
  width: 70vw !important;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #efefef;
}

tbody {
  display: inline-block;
}

tbody {
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Project Name</th>
      <th>Type</th>
      <th>Reservation Amount</th>
      <th>Down Payment</th>
      <th>Installment Plan</th>
      <th>Possession Charges</th>
      <th>Monthly Installaments</th>
      <th>Category Charges</th>
      <th>Rent Available </th>
      <th>Full Payment Discount</th>
      <th>Custom Field</th>
      <th>Date Created</th>
      <th># of Floors</th>
      <th># of Units</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>114</td>
      <td>Golf Floras </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>3</td>
      <td>8</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>111</td>
      <td>Amazon Mall 2 </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>60 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span><span>, field 3 </span></td>
      <td>2020-07-21</td>
      <td>5</td>
      <td>75</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>112</td>
      <td>Florence Galleria </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>1</td>
      <td>50</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>119</td>
      <td>Amazon Mall </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>113</td>
      <td>graana mall </td>
      <td>Mall</td>
      <td>4888</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>2</td>
      <td>3</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>120</td>
      <td>Amazon 4 </td>
      <td>Mall</td>
      <td>50</td>
      <td>1 %</td>
      <td>10 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>30 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>121</td>
      <td>Gloria Florance 3 </td>
      <td>Residential</td>
      <td>340000</td>
      <td>2 %</td>
      <td>10 Year</td>
      <td>30 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>5000 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-21</td>
      <td>13</td>
      <td>1</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>123</td>
      <td>Amazon Mall 3 </td>
      <td>Mall</td>
      <td>787</td>
      <td>1 %</td>
      <td>7 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>10 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-22</td>
      <td>0</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>126</td>
      <td>New Project </td>
      <td>Hotel</td>
      <td>45</td>
      <td>2 %</td>
      <td>5 Year</td>
      <td>20 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>30 %</td>
      <td><span>field 1</span><span>, field 2</span></td>
      <td>2020-07-22</td>
      <td>5</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
    <tr>
      <td>127</td>
      <td>Amazon Project 2 </td>
      <td>Mall</td>
      <td>45</td>
      <td>1 %</td>
      <td>5 Year</td>
      <td>10 %</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>50 %</td>
      <td><span>custom field 1</span><span>, custom field 2</span></td>
      <td>2020-07-23</td>
      <td>1</td>
      <td>0</td>
      <td>
        <div style="margin-right: 10px;"><button class="link-style ml-1 floorAndUnitBtn">Floors</button><button class=" link-style mr-2 ml-2 floorAndUnitBtn">Units</button><span class="mt-3 mb-3 link-style"><i class="fa fa-pencil-square-o mr-2" style="font-size: 16px;"></i></span>
          <span class="mt-3 mb-3 link-style"><i class="fa fa-trash mr-2" style="font-size: 16px;"></i></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>