Question

我有两个表，我想对齐两个表的列。但我无法做到这一点。

<div class="jumbotron">
  <div class="container">
    <div class="col-sm-8 col-sm-offset-2">
        <fieldset>
    <table>
      <tr class="row">
        <th class="col-md-3">header1</th>
        <th class="col-md-4">header2</th>
      </tr>
      <tr class="row">
        <td>azertyuopazertyuiop</td>
        <td>azertyuopazertyuiop</td>
      </tr>
    </table>
  </fieldset>

  <fieldset>
    <table>
      <tr class="row">
        <th class="col-md-3">headerheaderheader1</th>
        <th class="col-md-4">headerheaderheader2</th>
      </tr>
      <tr class="row">
        <td>azertyuopazertyuio</td>
        <td>azertyuopazertyuio</td>
      </tr>
     </table>
    </fieldset>
   </div>
  </div>
</div>

我不能使用单个表，其中我将所有数据放在一些建议中。因为我在两个表之间都有其他html代码，所以我需要两个单独的表。

Answer 1

将Bootstrap的table类添加到您的表中：

<table class="table">

<强> Bootply example

Answer 2

您可以将两个表合并为一个表，并依赖html来确定表行为，而不是依赖于bootstrap进行布局/样式化。

#bunch-o-stuff {
  padding: 70px;
}
.th {
  border-top: none !important;
}
.table {
  width: auto !important;
}
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
  border: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
  <div class="container">
    <div class="col-sm-8 col-sm-offset-2">
        <fieldset>
    <table class="table table-borderless">
      <tr class="row">
        <th class="col-md-3">header1</th>
        <th class="col-md-4">header2</th>
      </tr>
      <tr class="row">
        <td>azertyuopazertyuiop</td>
        <td>azertyuopazertyuiop</td>
      </tr>
    </table>
  </fieldset>
  <div id="bunch-o-stuff">
  </div>
  <fieldset>
    <table class="table table-borderless">
      <tr class="row">
        <th class="col-md-3">headerheaderheader1</th>
        <th class="col-md-4">headerheaderheader2</th>
      </tr>
      <tr class="row">
        <td>azertyuopazertyuio</td>
        <td>azertyuopazertyuio</td>
      </tr>
     </table>
    </fieldset>
   </div>
  </div>
</div>

对齐两个单独表的列

2 个答案: