In meinem HTML-Dokument habe ich eine Tabelle mit zwei Spalten und mehreren Zeilen. Wie kann ich mit CSS den Abstand zwischen der ersten und zweiten Spalte vergrößern? Ich habe versucht, "margin-right: 10px;" zu jeder der Zellen auf der linken Seite, aber ohne Wirkung.
Antworten:
Wenden Sie dies auf Ihre erste an <td>:
padding-right:10px;HTML-Beispiel:
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separate(es gab einen Tippfehler in der separateobigen Schreibweise )
border-spacing: 5px;
border-spacingFügt auch Platz zwischen Zeilen hinzu. Leider gibt es keine separate Eigenschaft für den vertikalen und horizontalen Abstand.
border-spacingnimmt zwei Argumente - eines für horizontal und eines für vertikal.
Ein Wort der Warnung: Obwohl dies padding-rightIhr spezielles (visuelles) Problem lösen könnte, ist es nicht der richtige Weg, den Abstand zwischen Tabellenzellen zu erhöhen. Was padding-rightfür eine Zelle funktioniert, ähnelt dem für die meisten anderen Elemente: Es fügt Platz innerhalb der Zelle hinzu. Wenn die Zellen keinen Rand oder keine Hintergrundfarbe haben oder etwas anderes, das das Spiel verrät, kann dies den Effekt des Einstellens des Abstands 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 erzeugen rechteckige Felder mit Inhalt und Rahmen. Zellen haben auch Polsterung. Interne Tabellenelemente haben keine Ränder.
Was ist dann der "richtige" Weg? Wenn Sie das cellspacingAttribut der Tabelle ersetzen möchten, ist border-spacing(mit border-collapsedeaktiviert) ein Ersatz. Wenn jedoch "Ränder" pro Zelle erforderlich sind, bin ich mir nicht sicher, wie dies mit CSS korrekt erreicht werden kann. Der einzige Hack, an den ich denken kann, ist zu verwendenpadding vorstellen wie oben zu verwenden, jegliches Styling der Zellen (Hintergrundfarben, Rahmen usw.) zu vermeiden und stattdessen Container-DIVs in den Zellen zu verwenden, um ein solches Styling zu implementieren.
Ich bin kein CSS-Experte, daher könnte ich mich in den obigen Punkten irren (was sehr gut zu wissen wäre! Auch ich hätte gerne eine CSS-Lösung mit Tabellenzellenrand).
Prost!
Wenn Sie keine Auffüllung verwenden können (z. B. haben Sie Ränder in td), versuchen Sie dies
table {
border-collapse: separate;
border-spacing: 2px;
}Mir ist klar, dass dies ziemlich verspätet ist, aber für den Datensatz können Sie auch CSS-Selektoren verwenden, um dies zu tun (ohne dass Inline-Stile erforderlich sind). Dieses CSS wendet Auffüllungen 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 ein viel eleganteres Markup, insbesondere in Fällen, in denen Sie viele spezifische Formatierungen mit CSS vornehmen müssen.
Der Rand funktioniert leider nicht für einzelne Zellen. Sie können jedoch zusätzliche Spalten zwischen den beiden Zellen einfügen, zwischen denen Sie ein Leerzeichen einfügen möchten. Eine andere Option ist die Verwendung eines Rahmens mit derselben Farbe wie der Hintergrund.
Sie können das einfach tun:
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>Es ist kein CSS erforderlich :) Diese 10px ist Ihr Platz.
Mit border-collapse: trennen;hat bei mir nicht funktioniert, weil ich nur einen Rand zwischen den Tabellenzellen brauche, nicht an den Seiten der Tabelle.
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>Diese Lösung funktioniert für tddiejenigen, die sowohl borderals auch paddingfür das Styling benötigen .
(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-blockund ohne Setwidth
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>Auf diese Weise können Sie einzelne Spalten in einer Zelle nicht herausgreifen. Meiner Meinung nach ist es am besten, ein style='padding-left:10px'in die zweite Spalte einzufügen und die Stile auf ein internes div oder Element anzuwenden. Auf diese Weise können Sie die Illusion eines größeren Raums erreichen.
Wenn Sie die Breite der Tabelle steuern können, fügen Sie in alle Tabellenzellen einen linken Abstand und in die gesamte Tabelle einen negativen linken Rand ein.
table {
margin-left: -20px;
width: 720px;
}
table td {
padding-left: 20px;
}Beachten Sie, dass die Breite der Tabelle die Auffüll- / Randbreite enthalten muss. Am obigen 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.
Ich fand, der beste Weg, um dieses Problem zu lösen, war eine Kombination aus Versuch und Irrtum und Lesen dessen, was vor mir geschrieben stand:
Wie Sie sehen können, habe ich einige ziemlich knifflige Dinge im Gange ... aber der Hauptkicker dafür, dass dies gut aussieht, sind:
ELTERNELEMENT (UL): Grenzkollaps: getrennt; Randabstand: .25em; Rand links: -.25em;
KINDERELEMENTE (LI): Anzeige: Tabellenzelle; vertikal ausrichten: Mitte;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }Nach Cians Lösung, einen Rand anstelle eines Randes festzulegen, habe ich festgestellt, dass Sie die Rahmenfarbe auf transparent setzen können, um zu vermeiden, dass die Farbe farblich an den Hintergrund angepasst werden muss. Funktioniert in FF17, IE9, Chrome v23. Scheint eine anständige Lösung zu sein, vorausgesetzt, Sie brauchen nicht auch eine tatsächliche Grenze.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>Die Verwendung von Polstern ist nicht die richtige Vorgehensweise. Sie kann das Aussehen ändern, ist aber nicht das, was Sie wollten. Dies kann Ihr Problem lösen.
Sie können beide verwenden:
padding-right:10px;
padding-right:10%;Aber es ist besser, mit % zu verwenden .
%
Wenn das Auffüllen für Sie nicht funktioniert, können Sie auch zusätzliche Spalten hinzufügen und mithilfe der Breite einen Rand festlegen <colgroup>. Keine der oben genannten Polsterungslösungen funktionierte für mich, als ich versuchte, dem Zellrand selbst einen Rand zu geben, und dies löste am Ende das Problem:
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>Gestalten Sie die Ränder der Tabellenzellen mit: n-tes Kind so, dass die zweite und dritte Spalte eine einzelne Spalte zu sein scheinen.
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }