对齐两个单独的表的列

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

<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代码，所以我需要两个独立的表。

来源

2017-07-19 edkeveked

你想表1的HEADER2与表2的HEADER2对准即使如果表1 /表2具有不同数量的头？我发现你有一张桌子很奇怪，但你正在使用bootstrap来布置它。你能发布图片或描述你想要的结果吗？ –

是的，我正在使用引导 – edkeveked

你可以两个表合并成一个表，并依靠HTML来确定，而不是依赖自举布局表行为/造型。

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

来源

2017-07-19 19:32:01

这可以是一个选项，虽然我没有试图确定它的工作原理。其实，在表格之间我有其他的html代码。为简洁起见，我没有在我的问题中插入它们。 – edkeveked

啊，我知道，很高兴知道。你能编辑你的问题来包含这些信息吗？ –

我编辑了这个问题。 – edkeveked

添加引导的table类到表中：

<table class="table">

Bootply example

来源

2017-07-19 19:25:07 j08691

这正是我想要的。但我不想在标题周围绘制线条。其次，我不希望表格标题横跨整行。 – edkeveked

您可以编写自己的CSS来删除不需要的Bootstrap边界。我不明白你说什么时候你不希望表格标题横跨整行。 – j08691

我的意思是，我不希望表格行占据整行，但只占其中的一部分。它更清楚吗？ – edkeveked

对齐两个单独的表的列

回答

相关问题