引导表所有列未显示

时间：2018-12-18 06:07:39

标签： html css twitter-bootstrap

在HTML中，我有一个包含20列的表格，我希望它们在单个视图中显示而不使用滚动条查看所有列。我也在使用引导程序。

enter image description here

1 个答案:

答案 0 :(得分：0)

我建议您以水平格式添加所有这些不同格式的列，因为这可能会影响表内容的可读性。但是，如果不适合更改布局，则可以采用此解决方案。 

td,
th {
  display: inline-block;
  word-wrap: break-word;
  width: 5%!important; /*as total number of column is 20*/
  padding: 0 !important;
  margin: 0;
}

th {
  height: 151px !important;
  overflow: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">Current Status</th>
        <th scope="col">Customer</th>
        <th scope="col">ORder Title</th>
        <th scope="col">Report Type</th>
        <th scope="col">Receive Date</th>
        <th scope="col">QA</th>
        <th scope="col">QA Time</th>
        <th scope="col">Handle</th>
        <th scope="col">QA Hold</th>
        <th scope="col">QC</th>
        <th scope="col">QC Time</th>
        <th scope="col">Delivered</th>
        <th scope="col">Delivered To(channel)</th>
        <th scope="col">DV V.</th>
        <th scope="col">Save Comments</th>
        <th scope="col">Handle</th>
        <th scope="col">Deviation Registration</th>
        <th scope="col">Deviation Report no</th>
        <th scope="col">Deviation Report</th>
        <th scope="col">Deviation Time</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>
      <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
      </tr>

    </tbody>
  </table>


</body>

</html>

相关问题
最新问题