it-swarm.com.de

Eine leere Tabellenzeile mit geringerer Höhe einfügen

Ich habe eine Tabelle bestehend aus einer Kopfzeile und ein paar Datenzeilen. Ich möchte eine leere Zeile zwischen der Kopfzeile und den Datenzeilen erstellen, aber ich möchte, dass diese leere Zeile eine geringere Höhe als die anderen Zeilen hat (damit keine so große Lücke entsteht).

Wie kann ich das erreichen?

Mein HTML-Markup-Code für die Tabelle lautet wie folgt:

<table class="action_table">
    <tbody>
        <tr class="header_row">
            <td>Header Item</td>
            <td>Header Item 2</td>
            <td>Header Item 3</td>
        </tr>            
        <tr class="blank_row">
            <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td>
        </tr>
        <tr class="data_row">
            <td>Data Item</td>
            <td>Data Item 2</td>
            <td>Data Item 3</td>
        </tr>
    </tbody>
</table>
40
Ed.

Fügen Sie einfach die CSS-Regel (und die geringfügig verbesserte Aufwertung) hinzu, die im Folgenden aufgeführt ist, und Sie sollten das Ergebnis erhalten, das Sie suchen.

CSS

.blank_row
{
    height: 10px !important; /* overwrites any other rules */
    background-color: #FFFFFF;
}

HTML

<tr class="blank_row">
    <td colspan="3"></td>
</tr>

Da ich keine Ahnung habe, wie Ihr aktuelles Stylesheet aussieht, habe ich die !important-Eigenschaft für alle Fälle hinzugefügt. Wenn möglich, sollten Sie es jedoch entfernen, da Sie selten auf !important-Deklarationen in einem Stylesheet zurückgreifen möchten, da die Möglichkeit groß ist, dass es später versaut wird.

48
Tom

Sie benötigen keine zusätzliche Tabellenzeile, um Platz in einer Tabelle zu schaffen. Siehe dies jsFiddle .
(Ich habe die Lücke hellgrau gemacht, damit Sie sie sehen können, aber Sie können dies in transparent ändern.)

Die Verwendung einer Tabellenzeile nur zu Anzeigezwecken ist Tabellenmissbrauch!

8
Mr Lister

Ich weiß, dass diese Frage bereits eine Antwort hat, aber ich habe einen noch einfacheren Weg gefunden, dies zu tun.

Einfach hinzufügen 

<tr height = 20px></tr>

In die Tabelle, in der Sie eine leere Zeile haben möchten. Es funktioniert gut in meinem Programm und es ist wahrscheinlich die schnellste mögliche Lösung.

6
Alwin G

Versuche dies:

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td>
6
Barry Kaye

Dieser arbeitet für mich:

<tr style="height: 15px;"/>
2
Kim Homann

Ich wollte das gleiche wie in dieser Frage stellen, aber die akzeptierte Antwort funktionierte nicht für May, 2018 (vielleicht ist die Antwort zu alt oder aus einem anderen Grund). Ich verwende bootsrap 3.3.7 und ionic v1. Sie müssen line-height einstellen, um die Höhe einer bestimmten Zeile festzulegen.

.blank_row {
  line-height: 3px;
}
<table class="action_table">
  <tbody>
    <tr class="header_row">
      <td>Header Item</td>
      <td>Header Item 2</td>
      <td>Header Item 3</td>
    </tr>
    <tr class="blank_row">
      <td bgcolor="#000" colspan="3">&nbsp;</td>
    </tr>
    <tr class="data_row">
      <td>Data Item</td>
      <td>Data Item 2</td>
      <td>Data Item 3</td>
    </tr>
  </tbody>
</table>

0
VicJordan