Eine Methode zum gruppieren von Zellen in einer Tabelle zusammen, in html?

So, es ist ziemlich straight-forward. Ich brauche eine Methode zum gruppieren von Zellen zusammen. Wie ein <div> oder eine <span> aber keiner von Ihnen arbeitete. <tbody> schien wie eine gute Lösung, aber es funktioniert nur für Tabellen-Zeilen. Hilfe!!!

  • versuchen Sie, wickeln Sie <TD> tags innerhalb <DIV>'s? ist, dass die grundlegende Idee?
InformationsquelleAutor Allen Hundley | 2012-03-23
  1. 1

    Wenn Sie auf der Suche nach einem Weg, um merge 2 o mehr Zellen in einer Zeile in einer einzigen Zelle, zusammen mit anderen "regelmäßige" Zellen (wie würden Sie in einem google - |excel-Tabelle) in einer Weise ähnlich zu diesem:

    Eine Methode zum gruppieren von Zellen in einer Tabelle zusammen, in html?

    dann können Sie die colspan Attribut für td Elemente, die angibt, wie viele Zellen Sie Zusammenführen:

    <tr>
  <td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
  <td> Regular cell </td>
  <td> Another cell in same row </td>
</tr>

    Darüber hinaus können Sie die td[colspan] - Selektor in css (in Kombination mit jedem Elternteil Wähler Ihrer Wahl) beziehen sich auf diese Zellen zusammengeführt.

    Hier ist ein funktionierendes Beispiel:

    CSS:

    /* Style for cells with any colspan attribute */
td[colspan] {
  text-align: center;
}

/* No extra space between cells */
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  margin: 0;
  padding: 3px 10px;
  text-align: right;
}

    HTML:

    <table>
  <tr>
    <th>Day</th>
    <th>Invoice</th>
    <th>Total</th>
  </tr>
  <tr>
    <!-- this cell will occupy 3 columns -->
    <td colspan=3>January</td>
  </tr>
  <tr>
    <td>2</td>
    <td>0348</td>
    <td>248.35</td>
  </tr>
  <tr>
    <td>7</td>
    <td>0349</td>
    <td>126.14</td>
  </tr>
  <tr>
    <td>18</td>
    <td>0350</td>
    <td>821.99</td>
  </tr>
  <tr>
    <td colspan=3>February</td>
  </tr>
  <tr>
    <td>27</td>
    <td>0351</td>
    <td>643.50</td>
  </tr> 
</table>

    InformationsquelleAutor SalDevOps
  2. 0

    Können Sie fügen Sie den html - col tag zum gruppieren der Spalten td.

    CSS:

    .col-group-1 {
  background-color: yellow;
 }

.col-group-2 {
  background-color: silver;
 }

    HTML:

    <table>
  <colgroup>
    <col class="col-group-1">
    <col span="2" class="col-group-2">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>City</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Mary</td>
    <td>New york</td>
    <td>987654321</td>
  </tr>
  <tr>
    <td>Magdalena</td>
    <td>Los Angeles</td>
    <td>123456789</td>
  </tr>
</table>

</body>
</html>

    Bitte überprüfen Sie die html-tag col

    und wie Sie mit css-styling

    • Nicht flexibel genug. Nehmen Sie meinen Fall als Beispiel. Ich brauche eine wrapper-tag alle 3 Zellen. Ideal ist es, wenn es gibt einige tag-unter tr und vor td
    • Kann man nicht einfach kopieren und einfügen von W3Schools dude... -1
    InformationsquelleAutor Lee Loback
Schreibe einen Kommentar