css - 如何使两行或多行长表适合内联 Bootstrap 4？

标签 css bootstrap-4

我想使用 bootstrap 和 css 布局两个表，使它们不会填满页面并溢出到下一行。第一个表 max-width:60% 和第二个 max-width:40%。它应该是这样的，我可以在每个表的 x-axis 和 y-axis 上滚动。 just like this

我尝试过使用 max-width 属性，但表格似乎溢出到下一行

<div id="Customers" class=" jumbotron tabcontent bg-light">
    <h3>CUSTOMERS</h3>
    <table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm " cellspacing="0"
  max-width="60%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>g.winters@datatables.net</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>a.cox@datatables.net</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>c.kelly@datatables.net</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>a.satou@datatables.net</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>b.williamson@datatables.net</td>
    </tr>
  </tbody>
</table>    

<table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm " cellspacing="0"
  max-width="40%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
      <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
      <td>g.winters@datatables.net</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
      <td>a.cox@datatables.net</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
      <td>c.kelly@datatables.net</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
      <td>a.satou@datatables.net</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
      <td>b.williamson@datatables.net</td>
    </tr>
  </tbody>
</table>    


  </div>

最佳答案

如果您不想修改您的 HTML 并且不介意使用 display:grid 和 display:contents 来让您的表格溢出，您可以这样做: https://codepen.io/gc-nomade/pen/YzKQvOQ 

#dtHorizontalVerticalExample,
#dtHorizontalVerticalExampleBis {
  display: grid;
  grid-template-columns: repeat(9, auto);
  max-width: 60%;
  max-height: 250px;
  overflow: auto;
}


/* id can be used only once */

#dtHorizontalVerticalExampleBis {
  max-width: 40%;
}


/* cells will become direct child of the grid system set on table */

thead,
tbody,
tfooter,
tr {
  display: contents;
}


/* OPTIONNAL KEEP headers on sight */


/* keep headers and name sticky */

thead th,
tbody td:first-child,
tbody td:nth-child(2) {
  position: sticky;
  background: white;
}

thead th {
  top: 0;
}

tr th:first-child,
tr th:nth-child(2) {
  z-index: 2;
}

tr :first-child {
  left: 0;
  z-index: 1;
}

tr :nth-child(2) {
  left: 3.8em;
  z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div id="Customers" class="d-flex flex-wrap jumbotron tabcontent bg-light">
  <h3 class="w-100">CUSTOMERS</h3>
  <table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm m-0" cellspacing="0" max-width="60%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
      </tr>
      <tr>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
      </tr>
      <tr>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
        <td>6224</td>
        <td>c.kelly@datatables.net</td>
      </tr>
      <tr>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
        <td>5407</td>
        <td>a.satou@datatables.net</td>
      </tr>
      <tr>
        <td>Brielle</td>
        <td>Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
        <td>4804</td>
        <td>b.williamson@datatables.net</td>
      </tr>
    </tbody>
  </table>
  <table id="dtHorizontalVerticalExampleBis" class="table table-striped table-bordered table-sm m-0" cellspacing="0" max-width="40%">
    <thead>
      <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
        <th>Extn.</th>
        <th>E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger</td>
        <td>Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
      </tr>
      <tr>
        <td>Garrett</td>
        <td>Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
      </tr>
      <tr>
        <td>Ashton</td>
        <td>Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
      </tr>
      <tr>
        <td>Cedric</td>
        <td>Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
        <td>6224</td>
        <td>c.kelly@datatables.net</td>
      </tr>
      <tr>
        <td>Airi</td>
        <td>Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
        <td>5407</td>
        <td>a.satou@datatables.net</td>
      </tr>
      <tr>
        <td>Brielle</td>
        <td>Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
        <td>4804</td>
        <td>b.williamson@datatables.net</td>
      </tr>
    </tbody>
  </table>


</div>

灵感来自 https://codepen.io/gc-nomade/pen/WVXPNP

注意:id只能使用一次。

我添加了一些引导类来添加 flex 行为

  • #Customers : d-flex flex-wrap

  • 和w-100到h3

<div id="Customers" class="d-flex flex-wrap jumbotron tabcontent bg-light">
  <h3 class="w-100">CUSTOMERS</h3>

future 几个月的想法:https://caniuse.com/#search=contents在使用 display:contents

之前

关于css - 如何使两行或多行长表适合内联 Bootstrap 4？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57711891/

上一篇：css - 如何在 Aurelia 中动态更改元素主题

下一篇：html - 外部 div 背景在 Chrome 中可见 arround 内部 div

相关文章：

javascript - 等待时在提交时显示带有叠加层的加载 div

java - 如何使用 CSS 对 JavaFX 中的按钮或切换按钮的文本进行样式化？

html - bootstrap 4 col-6 网格不像 col-xs-6 网格那样响应

java - 使用 thymeleaf 和 bootstrap 未在验证表单上应用样式

html - 组织导航栏 div 元素

html - 如何根据表头检查表中 <td> 值的条件

html - 使用 CSS 排列隐藏元素

css - 在 Full Calendar 2.3.2 中更改标题标题颜色

javascript - 仅使用 css 放大 iframe 而无需重新加载 html 内容

bootstrap-4 - Bootstrap v4.0 汉堡项右侧

©2024 IT工具网  联系我们