如何使內聯樣式顯示兩個表格？

我想顯示2表內聯，所以我試圖設置其顯示內聯。它失敗:(如何使內聯樣式顯示兩個表格？

什麼是設置它們的最簡單的方式來直接顯示出來？

table { 
 
    display: inline; 
 
} 
 
table, td, th { 
 
    border: 1px solid black; 
 
    }

<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table>

來源

2016-10-25 king yau

這是工作 – Weedoze

@Weedoze對不起，我想念我的邊框樣式在上面的代碼.. –

不知道你期待什麼，但你的例子所行的期望是什麼。 – Goombah

使用display:inline-table。

MDN Reference

內聯表值沒有在HTML的直接映射。它的行爲像一個HTML元素，但是作爲內聯框，而不是塊級框。表格框內是一個塊級的上下文。

table { 
 
    display: inline-table; 
 
} 
 
table, 
 
td, 
 
th { 
 
    border: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table> 
 

 

 
<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Lois</td> 
 
    <td>Griffin</td> 
 
    </tr> 
 
</table>

來源

2016-10-25 09:10:30

-2

如果使用的是引導，請儘量利用柱結構。

如果不使用表格嘗試float property。

table { 
    float: left; 
    }

here is an sample code in fiddle

來源

2016-10-25 08:41:51

我不能使用浮點數，它會破壞我的真實網頁..並且我沒有使用引導程序 –

您可以嘗試使用嵌套表格方法。它可能不會影響任何東西 –

試試這個。如果你想要內聯樣式的2表，那麼你必須先取外表。並且在該表的<td>中，您可以採用內部表<table>。

<table width="1000"> 
<tr> 
<td> 
<table border="1" width="500"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    </tr> 
    <tr> 
    <td>Lois</td> 
    <td>Griffin</td> 
    </tr> 
</table> 
</td> 
<td> 
<table border="1" width="500"> 
    <tr> 
    <th>Firstname</th> 
    <th>Lastname</th> 
    </tr> 
    <tr> 
    <td>Lois</td> 
    <td>Griffin</td> 
    </tr> 
</table> 
</td> 
</tr> 
</table>

來源

2016-10-25 11:29:30

如何使內聯樣式顯示兩個表格？

回答

相關問題