Frage CSS-Zellenrand


In meinem HTML-Dokument habe ich eine Tabelle mit zwei Spalten und mehreren Zeilen. Wie kann ich den Platz zwischen der ersten und zweiten Spalte mit CSS erhöhen? Ich habe versucht, "margin-right: 10px;" zu jeder der Zellen auf der linken Seite, aber ohne Wirkung.


74
2018-04-04 03:28


Ursprung


Antworten:


Wenden Sie dieses auf Ihr erstes an <td>:

padding-right:10px;

HTML-Beispiel:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

73
2018-04-04 03:32



Ein Wort der Warnung padding-right könnte Ihr spezielles (visuelles) Problem lösen, es ist nicht der richtige Weg, Abstände hinzuzufügen zwischen Tabellenzellen. Was padding-right Das ist für eine Zelle ähnlich wie für die meisten anderen Elemente: Sie fügt Raum hinzu innerhalb die Zelle. Wenn die Zellen keine Rand- oder Hintergrundfarbe oder etwas anderes haben, das das Spiel weggibt, kann dies den Effekt des Einstellens des Raums zwischen den Zellen nachahmen, aber nicht anders.

Wie bereits erwähnt, werden Randspezifikationen für Tabellenzellen ignoriert:

CSS 2.1 Spezifikation - Tabellen - Visuelles Layout des Tabelleninhalts

Interne Tabellenelemente generieren   rechteckige Kästen mit Inhalt und   Grenzen. Zellen haben auch Polsterung.   Interne Tabellenelemente haben keine   Ränder.

Was ist dann der richtige Weg? Wenn Sie das ersetzen möchten cellspacing Attribut der Tabelle, dann border-spacing (mit border-collapse deaktiviert) ist ein Ersatz. Wenn jedoch pro-Zelle "Margen" erforderlich sind, bin ich mir nicht sicher, wie dies mit CSS korrekt erreicht werden kann. Der einzige Hack, den ich mir vorstellen kann, ist zu benutzen padding Vermeiden Sie, wie bereits erwähnt, das Styling der Zellen (Hintergrundfarben, Rahmen usw.) und verwenden Sie stattdessen Container-DIVs in den Zellen, um ein solches Styling zu implementieren.

Ich bin kein CSS-Experte, also könnte ich mich im oben genannten Punkt irren (was wäre toll zu wissen! Ich hätte auch gerne eine Tischzellenrand-CSS-Lösung).

Prost!


138
2018-06-07 02:35



Wenn Sie Padding nicht verwenden können (z. B. haben Sie Grenzen in td), versuchen Sie es

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

19
2018-02-19 14:11



Ich weiß, dass dies ziemlich verspätet ist, aber für den Datensatz können Sie auch CSS-Selektoren verwenden, um dies zu tun (die Notwendigkeit für Inline-Stile entfällt.) Dieses CSS wendet Padding auf die erste Spalte jeder Zeile an:

table > tr > td:first-child { padding-right:10px }

Und das wäre Ihr HTML, ohne CSS !:

<table><tr><td>data</td><td>more data</td></tr></table>

Dies ermöglicht viel eleganteres Markup, besonders in Fällen, in denen Sie viele spezifische Formatierungen mit CSS durchführen müssen.


14
2017-07-23 14:47



Rand funktioniert leider nicht auf einzelnen Zellen, aber Sie könnten zusätzliche Spalten zwischen den zwei Zellen hinzufügen, die Sie ein Leerzeichen zwischen ... einfügen möchten. Eine andere Option ist die Verwendung eines Rahmens mit der gleichen Farbe wie der Hintergrund ...


13
2018-04-07 13:33



Du kannst das einfach tun:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

Kein CSS ist erforderlich :) Dieses 10px ist dein Platz.


8
2018-04-05 21:21



Versuchen padding-right. Du darfst nicht setzen marginist zwischen den Zellen.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

7
2018-04-04 03:32



Verwenden Grenzkollaps: getrennt; funktionierte nicht für mich, weil ich nur einen Rand zwischen den Tabellenzellen nicht auf den Seiten des Tisches brauche.

Ich habe die nächste Lösung gefunden:

-CSS

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

-HTML

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

4
2017-10-28 22:58



Diese Lösung funktioniert für tdDas braucht beides border und padding zum Stylen.
 (Getestet auf Chrome 32, IE 11, Firefox 25)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

Aktualisiert 2016

Firefox unterstützt es jetzt ohne inline-block und ein Satz width

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }
<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>


4
2018-02-04 11:19



Sie können einzelne Spalten in einer Zelle nicht auf diese Weise ausschließen. Meiner Meinung nach ist Ihre beste Option, ein hinzuzufügen style='padding-left:10px' in der zweiten Spalte und wenden Sie die Stile auf ein internes Div oder Element an. Auf diese Weise können Sie die Illusion eines größeren Raumes erreichen.


2
2018-04-04 03:32



Wenn Sie die Breite der Tabelle steuern möchten, fügen Sie für alle Tabellenzellen ein Padding-Left ein und fügen Sie einen negativen Rand links auf der gesamten Tabelle ein.

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

Beachten Sie, dass die Breite der Tabelle die Padding / Margin-Breite enthalten muss. Mit dem oben genannten Beispiel beträgt die visuelle Breite der Tabelle 700 Pixel.

Dies ist nicht die beste Lösung, wenn Sie Rahmen für Ihre Tabellenzellen verwenden.


2
2018-03-05 22:41