對齊兩個單獨的表的列

我有兩個表，我想對齊兩個表的列。但我無法做到這一點。對齊兩個單獨的表的列

<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

對齊兩個單獨的表的列

回答

相關問題