代码之家 › 专栏 › 技术社区 › Carol.Kar

将表格彼此对齐

bootstrap-4 twitter-bootstrap html

Carol.Kar · 技术社区 · 7 年前

我用bootstrap 4创建了两个表,一方面显示规范,另一方面显示收入统计信息。

我把两张桌子都放在 col-xs-6 -类并希望一张表左对齐,另一张表右对齐。然而,目前的表格不知何故包括彼此之间。请在下面找到我的最小可行示例:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-6">
    <h2>Specifications</h2>
    <table class="table stats">
      <tbody>
        <tr>
          <th>Price :</th>
          <td class=" text-right">
            100 </td>
        </tr>
        <tr>
          <th>Manufacturer:</th>
          <td class=" text-right">
            Gigabyte </td>
        </tr>
        <tr>
          <th>Wattage:</th>
          <td class=" text-right">
            150 </td>
        </tr>
        <tr>
          <th>Product:</th>
          <td class=" text-right">
            Product 1 </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-xs-6">
    <h2>Earning</h2>
    <table class="table stats">
      <tbody>
      </tbody>
      <thead>
        <tr>
          <th>Period</th>
          <th class="text-right">Rev</th>
          <th class="text-right">Cost</th>
          <th class="text-right">Profit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Hour</td>
          <td class="text-right text-info">$
            <span id="rev-hour">
                          0.022                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-hour">
                          0.006                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-hour">
                          0.016                        </span>
          </td>
        </tr>
        <tr>
          <td>Day</td>
          <td class="text-right text-info">$
            <span id="rev-day">
                          1.34                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-day">
                          0.36                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-day">
                          0.98                        </span>
          </td>
        </tr>
        <tr>
          <td>Week</td>
          <td class="text-right text-info">$
            <span id="rev-week">
                          9.37                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-week">
                          2.52                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-week">
                          6.85                        </span>
          </td>
        </tr>
        <tr>
          <td>Month</td>
          <td class="text-right text-info">$
            <span id="rev-month">
                          37.48                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-month">
                          10.08                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-month">
                          27.40                        </span>
          </td>
        </tr>
        <tr>
          <td>Year</td>
          <td class="text-right text-info">$
            <span id="rev-year">
                          449.77                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-year">
                          120.96                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-year">
                          328.81                        </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

关于如何调整 Specification 左边的桌子和 Earnings 右边的桌子?

谢谢你的回复!

2 回复 | 直到 7 年前

Nandita Sharma 7 年前

添加 container-fluid 行周围的类DIV。没有这样的阶级 col-xs-6 而是使用 col-6

在中添加了另一个分区 第6列 并添加填充以在它们之间留出一些空间。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <div class="pr-1">
        <h2>Specifications</h2>
        <table class="table stats">
          <tbody>
            <tr>
              <th>Price :</th>
              <td class=" text-right">
                100 </td>
            </tr>
            <tr>
              <th>Manufacturer:</th>
              <td class=" text-right">
                Gigabyte </td>
            </tr>
            <tr>
              <th>Wattage:</th>
              <td class=" text-right">
                150 </td>
            </tr>
            <tr>
              <th>Product:</th>
              <td class=" text-right">
                Product 1 </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-6">
      <div class="pr-1">
        <h2>Earning</h2>
        <table class="table stats">
          <tbody>
          </tbody>
          <thead>
            <tr>
              <th>Period</th>
              <th class="text-right">Rev</th>
              <th class="text-right">Cost</th>
              <th class="text-right">Profit</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Hour</td>
              <td class="text-right text-info">$
                <span id="rev-hour">
                            0.022                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-hour">
                            0.006                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-hour">
                            0.016                        </span>
              </td>
            </tr>
            <tr>
              <td>Day</td>
              <td class="text-right text-info">$
                <span id="rev-day">
                            1.34                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-day">
                            0.36                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-day">
                            0.98                        </span>
              </td>
            </tr>
            <tr>
              <td>Week</td>
              <td class="text-right text-info">$
                <span id="rev-week">
                            9.37                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-week">
                            2.52                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-week">
                            6.85                        </span>
              </td>
            </tr>
            <tr>
              <td>Month</td>
              <td class="text-right text-info">$
                <span id="rev-month">
                            37.48                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-month">
                            10.08                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-month">
                            27.40                        </span>
              </td>
            </tr>
            <tr>
              <td>Year</td>
              <td class="text-right text-info">$
                <span id="rev-year">
                            449.77                        </span>
              </td>
              <td class="text-right text-danger">$
                <span id="cost-year">
                            120.96                        </span>
              </td>
              <td class="text-right text-success">$
                <span id="earning-year">
                            328.81                        </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

zer00ne 7 年前

一个规则集:

table.table.stats {display:inline-table}

display: inline-table 行为只是一个与元素并排的表,而不是默认的占据整个宽度并左右推所有东西的行为——上下推。

您可能有一个更复杂的环境,其中包含真正的代码,因此您可以 Chain the classes 为了更高 specificity 这可能是杀伤力过大,但对于引导程序,这是常见的必要性。

table.table.stats.table.stats {display:inline-table}

演示

table.table.stats {
  display: inline-table
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-6">
    <h2>Specifications</h2>
    <table class="table stats">
      <tbody>
        <tr>
          <th>Price :</th>
          <td class=" text-right">
            100 </td>
        </tr>
        <tr>
          <th>Manufacturer:</th>
          <td class=" text-right">
            Gigabyte </td>
        </tr>
        <tr>
          <th>Wattage:</th>
          <td class=" text-right">
            150 </td>
        </tr>
        <tr>
          <th>Product:</th>
          <td class=" text-right">
            Product 1 </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="col-xs-6">
    <h2>Earning</h2>
    <table class="table stats">
      <tbody>
      </tbody>
      <thead>
        <tr>
          <th>Period</th>
          <th class="text-right">Rev</th>
          <th class="text-right">Cost</th>
          <th class="text-right">Profit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Hour</td>
          <td class="text-right text-info">$
            <span id="rev-hour">
                          0.022                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-hour">
                          0.006                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-hour">
                          0.016                        </span>
          </td>
        </tr>
        <tr>
          <td>Day</td>
          <td class="text-right text-info">$
            <span id="rev-day">
                          1.34                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-day">
                          0.36                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-day">
                          0.98                        </span>
          </td>
        </tr>
        <tr>
          <td>Week</td>
          <td class="text-right text-info">$
            <span id="rev-week">
                          9.37                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-week">
                          2.52                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-week">
                          6.85                        </span>
          </td>
        </tr>
        <tr>
          <td>Month</td>
          <td class="text-right text-info">$
            <span id="rev-month">
                          37.48                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-month">
                          10.08                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-month">
                          27.40                        </span>
          </td>
        </tr>
        <tr>
          <td>Year</td>
          <td class="text-right text-info">$
            <span id="rev-year">
                          449.77                        </span>
          </td>
          <td class="text-right text-danger">$
            <span id="cost-year">
                          120.96                        </span>
          </td>
          <td class="text-right text-success">$
            <span id="earning-year">
                          328.81                        </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>