问题同一行上的多个表

我有三个表都包含在div中。我试图让他们所有在div中显示内联，但他们每个都显示在他们自己的行。我将它们全部设置为显示：内联在表级别，但这没有做到这一点。有关如何在同一行显示多个表的任何想法？

 <div id="container">
   <table id="previous-arrow" class="scroll">
    <tr>
        <td><a href="#" id="nav-prev"><span>Previous</span></a></td>
    </tr>
   </table>
   <table id="tour-carousel">
    <tr id="carousel-row">
        <td>data here</td> 
    </tr>
   </table>
   <table id="next-arrow" class="scroll">
    <tr>
        <td><a href="#" id="nav-next"><span>Next</span></a></td>
    </tr>
   </table>
</div>

5914

2017-11-16 21:59

起源

你能发布你的代码吗？ - j08691

就像是 floating : left 也许？ - Leron

答案:

您希望它们以内联方式显示，但仍然以表格形式显示（否则它们的内容将创建导致包装的匿名表格块）。

display: inline-table;

2017-11-16 22:04

你可以漂浮他们：

HTML

<div class="container">
    <table><tr><td>Table 1</td></tr></table>
    <table><tr><td>Table 2</td></tr></table>
    <table><tr><td>Table 3</td></tr></table>
</div>

CSS

table {
    float:left;
    width:33%;
}

小提琴： http://jsfiddle.net/kboucher/6HuyW/

2017-11-16 22:03

我试过这个，但它仍然是多行。也许其他css问题正在涌入。 - Skitterm

你也可以发布你的CSS吗？ - Kevin Boucher

尝试将它们留在css中。

table {
 float:left;
}

并确保它们并排的宽度不大于容器的宽度。

2017-11-16 22:02

使用以下代码

<div id="container">
   <table id="previous-arrow" class="scroll" **style="float:left"**>
<tr>
    <td><a href="#" id="nav-prev"><span>Previous</span></a></td>
</tr>
 </table>
<table id="tour-carousel" **style="float:left"**>
<tr id="carousel-row">
    <td>data here</td> 
</tr>
</table>
<table id="next-arrow" class="scroll" **style="float:left"**>
<tr>
    <td><a href="#" id="nav-next"><span>Next</span></a></td>
</tr>
</table> 
</div>

2017-10-17 06:23

问题 同一行上的多个表

答案:

热门问题

问题同一行上的多个表