Platz drei html-Tabellen nebeneinander

Kann mir jemand helfen bei der Platzierung von drei Tabellen nebeneinander? Alle meine aktuellen Tische werden gestapelt von oben nach unten. Hier ist mein code unter:

<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
  • Btw, du bist fehlt das abschließende '>' in deiner Nähe-table-tags. Wenn das wirklich in deinem code, werden Sie wollen, um es zu beheben.
  • versuchen Sie, mit display: inline-table;
  • Diese Frage scheint off-topic, weil es zeigt, dass kein Versuch.
InformationsquelleAutor Trung Tran | 2014-06-02
  1. 3

    Erste, Sie brauchen, um richtig schließen Sie Ihre table tags wie diese

    </table>

    Zweiten table ist ein block-element, so müssen Sie angeben display:inline-block in Tabelle Stil wie diese:

    <table style="width:30%;display:inline-block">
    InformationsquelleAutor morgul
  2. 0

    Können Sie anwenden float: left; auf Ihren Tisch Design. Dieser wird versuchen, platzieren Sie Sie nebeneinander, aber wenn dort nicht genug Platz ist horizontal, Sie sind stapelbar. Dies kann passieren, wenn der Tabelleninhalt Kräfte die Tabelle breiter als die 30%, die Sie setzen. Hier ist die einfache CSS:

    table {
    float: left;
}

    Hinzufügen, dass innerhalb von style-tags oder .css-Datei. Es ist besser der Praxis zu vermeiden, anwenden von styles direkt in den HTML-Code.

    InformationsquelleAutor Surreal Dreams
  3. 0

    Die Lösung ist floating Tabellen:

    <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>

    Aber ich schlage vor, Sie verwenden divs, statt Tabellen und entfernen von inline-Formatvorlagen...

    InformationsquelleAutor ZeroWorks
  4. 0

    Hinzufügen von ein wenig CSS wird den trick tun. Schließen Sie die Tabelle richtig </table>. Starten Sie Ihren Tisch mit <table style="display: inline-block;" width="auto">.

    InformationsquelleAutor Surajit Majumdar
Schreibe einen Kommentar