15

すべてが div に含まれる 3 つのテーブルがあります。私はそれらをすべて 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>
4

4 に答える 4

16

それらをインラインで表示したいが、それでもテーブルとして表示したい (そうしないと、それらのコンテンツはラッピングを引き起こす匿名のテーブル ブロックを作成する)。

display: inline-table;
于 2012-11-16T22:04:36.520 に答える
5

それらを浮かせることができます：

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/

于 2012-11-16T22:03:14.727 に答える
1

css でそれらをフロートさせてみてください。

table {
 float:left;
}

そして、横に並べたものの幅がコンテナの幅よりも大きくないことを確認してください。

于 2012-11-16T22:02:47.250 に答える
0

以下のコードを使用

<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>
于 2016-10-17T06:23:19.103 に答える