Question

如果表格不适合页面，我想并排显示几个表格，水平滚动溢出。

jsfiddle示例：https://jsfiddle.net/c949Lspy/10/

Bootstrap：https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css

<div style="white-space: nowrap;">

<table class="table table-bordered d-inline-block align-top" style=" padding: 0px;">
    <thead>
      <tr><th> Heading 1</th></tr>
    </thead>
    <tbody>

      <tr><td>Row content </td></tr>
      <tr><td>Row content </td></tr>
    </tbody>
</table>

</div>

检查员告诉我Bootstrap以某种方式设置了宽度 table等于视口的宽度。这是为什么？（第1排）的jsfiddle）
如果我手动设置表的宽度，则表元素可以没有填满空间，看起来很尴尬。（jsfiddle的第2行）
如何设置表格以准确填充所需空间明确给出？

Answer 1

这是我的解决方案。我使用了边框，所以你可以更好地理解。

我不得不简化和编辑一些HTML。

https://codepen.io/mikele/pen/OxWMRq

sampleNo

<强>解释

我将表格包装成2个div。第一个div - 设置宽度，比如300px，还有overflow-x来滚动。子div设置了一个非常宽的宽度，因此它可以适合所有浮动表。

计算table { border: solid blue!important; float: left!important; width: 200px!important; } #table-container { border: solid red; height: 300px; width: 1000px; display: inline-block; overflow-x: scroll; } #big { border: solid green; height: 100%; display: inline-block; width: 10000px; } （jQuery）的宽度：

#big

＆＃13;

var tableWidth = 200; // you can get it from a table if you like

var nrTables = $('table').length;

$('#big').css('width', (nrTables * tableWidth + 30) + 'px');

＆＃13;

var tableWidth = 200; // you can get it from a table if you like

    var nrTables = $('table').length;

    $('#big').css('width', (nrTables * tableWidth + 30) + 'px');

＆＃13;

table {
  border: solid blue!important;
  float: left!important;
  width: 200px!important;
}
#table-container {
 border: solid red;
  height: 300px;
  width: 500px;
  display: inline-block;
  overflow-x: scroll;
}
#big {
  border: solid green;
  height: 100%;
  display: inline-block;
  width: 10000px;
}

＆＃13;

Answer 2

编辑X2：在BS3与BS4中显示响应行为的差异

我建议在bootstrap3中使用网格系统和表格响应。我还建议将你的身体封装在一个容器中，并且前两个表可能在容器流体中。我也删除了你的d-inline-block align-top ..这就是我所做的：

<div class="container" style="white-space: nowrap;">
<div class="container-fluid">
<div class="row">
  <div class="col-md-6 col-xs-12">
  <table class="table table-bordered table-responsive" style="background: #f7fec0; padding: 0px;">
    <thead>
        <th> Heading 1</th>
    </thead>
    <tbody>
      <tr>
        <td>Row content </td>
      </tr>
      <tr>
        <td>Row content </td>
      </tr>
      <tr>
        <td>Row content </td>
      </tr>


    </tbody>
  </table>
</div>
<div class="col-md-6 col-xs-12">
  <table class="table table-bordered table-responsive" style="background: #cac1fd; padding: 0px;">
    <thead>
      <tr>
        <th> Heading 2</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Row content </td>
      </tr>
      <tr>
        <td>Row content </td>
      </tr>
      <tr>
        <td>Row content </td>
      </tr>


    </tbody>
  </table>
</div>
</div>

Non responsive behaviors in BS4

Responsive working as intended in BS3

Bootstrap4 beta：表格和d-inline-block

2 个答案: