Question

当我尝试使用bootsrap 4响应表时，我发现了以下问题。

如果桌子中没有足够的空间来填充整个宽度，它就像这样。

我的代码如下：

＆＃13;

<div class="container" id="maincontainer">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Bevorstehende Veranstaltungen:</p>
    <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
   </tbody>
</table>

<p>Vergangene Veranstaltungen:</p>
    <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">30.06.2017 15:30 - 16:00</th>
      <td>2/2</td>
      <td>dafdfsfa</td>
      <td>97</td>
    </tr>
</tbody>
</table>
</div>

＆＃13;

我希望有人能帮助我。

最诚挚的问候亚历

Answer 1

那是因为你有2个单独的表，第一列有2个不同长度的文本。我认为使第一列完全相同宽度的唯一方法是在其中包含完全相同的字符数量，即向第一个表添加日期和时间戳。

Answer 2

在bootstrap表中，列的宽度取决于数据。

如果您希望两个表上的列具有相同的宽度，我认为<div>可能有用而不是Table。

<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
    <div class="col-md-3">
       <b>#</b> 
    </div>
    <div class="col-md-3">
      <b> First Name</b> 
    </div>
    <div class="col-md-3">
      <b>  Last Name</b>
    </div>
    <div class="col-md-3">
       <b>Username</b> 
    </div>
</div>
<br />
<p>Bevorstehende Veranstaltungen:</p>
<div class="row">
   <div class="col-md-3">
     <b>#</b>
   </div>
   <div class="col-md-3">
     <b> First Name</b>
   </div>
   <div class="col-md-3">
     <b>  Last Name</b>
   </div>
 <div class="col-md-3">
    <b>Username</b>
  </div>
</div>

<div class="row primary-bordered-table">
  <div class="col-md-3">
      30.06.2017 15:30 - 16:00
  </div>
  <div class="col-md-3">
      2/2
  </div>
  <div class="col-md-3">
      dafdfsfa
  </div>
  <div class="col-md-3">
      97
  </div>
</div>

然后该列将如下图所示

Answer 3

你也可以用js设置宽度，给出相同的宽度像

$('.table').dataTable( {
  "columnDefs": [
    { "width": "30%" },
    { "width": "20%" },
    { "width": "20%" },
    { "width": "30%" },
  ]
} )

bootstrap 4响应表

3 个答案: