0

3つのテーブルを並べて配置するのを手伝ってもらえますか? 現在のテーブルはすべて上から下に積み上げられています。以下は私のコードです：

<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table
<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
 </table
<table style="width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table
4

4 に答える 4

3

tableまず、このようにタグを正しく閉じる必要があります

</table>

2 つ目はブロック要素であるため、次のようにテーブル スタイルでtable指定する必要があります。display:inline-block

<table style="width:30%;display:inline-block">
于 2014-06-02T18:20:20.997 に答える
0

float: left;テーブルのスタイリングに適用できます。これは横に並べて配置しようとしますが、水平方向に十分なスペースがない場合は積み重ねます。これは、表のコンテンツによって表が設定した 30% よりも広くなる場合に発生する可能性があります。このための単純な CSS は次のとおりです。

table {
    float: left;
}

それをスタイル タグまたは .css ファイル内に追加します。HTML にスタイルを直接適用することは避けたほうがよいでしょう。

于 2014-06-02T18:18:03.933 に答える
0

CSS を少し追加するだけでうまくいきます。テーブルを適切に閉じます</table>。でテーブルを開始します <table style="display: inline-block;" width="auto">。

于 2014-11-20T10:06:44.110 に答える
0

解決策はフローティング テーブルです。

<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>
<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>
<table style="float: left; width:30%">
        <tr>
          <td><strong>Department:</strong></td>
          <td><%= @opportunity.department %></td>
        </tr> 

        <tr>
          <td><strong>Agency:</strong></td>
          <td><%= @opportunity.agency %></td>
        </tr>
</table>

ただし、テーブルの代わりに div を使用し、インライン スタイルを削除することをお勧めします...

于 2014-06-02T18:18:48.417 に答える