将表格彼此对齐

Question

我创建了两个带有引导程序4的表，它们一方面显示规格，另一方面显示收入统计信息。

我将两个表都放在col-xs-6 -class中，希望一个表左对齐，另一个表右对齐。 然而，当前的表在某种程度上避让对方。 请在下面的最低可行示例中找到：

 <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表右对齐？

感谢您的答复！

Answer 1

一个规则集：

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

display: inline-table行为只是一个与元素内联的表，而不是默认行为，即占据整个宽度并上下左右推动所有内容。

您的真实代码可能会拥有更复杂的环境，因此您可以将类链接起来以获得更高的特异性 ，这可能是过分的，但是使用Bootstrap是很常见的。

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> 

Answer 2

在该行周围添加container-fluid类div。 没有col-xs-6这样的类，而是使用col-6

在col-6添加了另一个div，并在其中添加了填充以在它们之间留出一些空间。

 <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>