Ich versuche, HTML / CSS zu entwerfen, mit dem bestimmte Zeilen in einer Tabelle umrandet werden können. Ja, ich weiß, dass ich eigentlich keine Tabellen für das Layout verwenden soll, aber ich kenne noch nicht genug CSS, um es vollständig zu ersetzen.
Wie auch immer, ich habe eine Tabelle mit mehreren Zeilen und Spalten, von denen einige mit Zeilenbereich und Spaltenbereich zusammengeführt sind, und ich möchte einen einfachen Rahmen um Teile der Tabelle setzen. Derzeit verwende ich 4 separate CSS-Klassen (oben, unten, links, rechts), die ich an die <td>
Zellen anhänge, die sich oben, unten, links und rechts in der Tabelle befinden.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
Gibt es eine einfachere Möglichkeit, das zu tun, was ich will? Ich habe versucht, oben und unten auf a anzuwenden, <tr>
aber es hat nicht funktioniert. (ps Ich bin neu in CSS, daher gibt es wahrscheinlich eine wirklich grundlegende Lösung dafür, die ich verpasst habe.)
Hinweis: Ich muss mehrere umrandete Abschnitte haben. Die Grundidee besteht darin, mehrere umrandete Cluster zu haben, die jeweils mehrere Zeilen enthalten.
quelle
Antworten:
Wie wäre es
tr {outline: thin solid black;}
? Funktioniert für mich mit tr- oder tbody-Elementen und scheint mit den meisten Browsern kompatibel zu sein, einschließlich IE 8+, jedoch nicht zuvor.quelle
Vielen Dank an alle, die geantwortet haben! Ich habe alle hier vorgestellten Lösungen ausprobiert und mehr im Internet nach anderen möglichen Lösungen gesucht. Ich denke, ich habe eine gefunden, die vielversprechend ist:
Ausgabe:
Statt mit den hinzufügen
top
,bottom
,left
, undright
Klassen zu jedem<td>
, alles , was ich tun muß, ist hinzuzufügen ,top row
nach oben<tr>
,bottom row
nach unten<tr>
, undrow
zu jedem<tr>
dazwischen. Stimmt etwas mit dieser Lösung nicht? Gibt es plattformübergreifende Probleme, die mir bekannt sein sollten?quelle
cellspacing
Attribut ist in HTML5 veraltet. CSS scheint der richtigetable { border-collapse: collapse; border-spacing: 0; }
Weg zu sein.Wenn Sie den
border-collapse
Stil fürcollapse
die übergeordnete Tabelle festlegen , sollten Sie in der Lage sein, Folgendes zu formatierentr
: (Stile sind für die Demo inline)Ausgabe:
quelle
Ich habe auch nur damit herumgespielt, und dies schien die beste Option für mich zu sein:
Beachten Sie, dass dies die Verwendung von fließenden / automatischen Spaltenbreiten verhindert , da die Zellen nicht mehr mit denen in anderen Zeilen ausgerichtet werden, die Formatierung von Rahmen / Farbe jedoch weiterhin in Ordnung ist. Die Lösung besteht darin , den TRs und TDs eine bestimmte Breite (entweder px oder%) zu geben.
Natürlich können Sie den Selektor erstellen,
tr.myClass
wenn Sie ihn nur auf bestimmte Zeilen anwenden möchten. Anscheinenddisplay: table
funktioniert es nicht für IE 6/7, aber es gibt wahrscheinlich andere Hacks (hasLayout?), Die für diese funktionieren könnten. :-(quelle
Hier ist ein Ansatz, bei dem tbody-Elemente verwendet werden, um dies zu erreichen. Sie können den Rand nicht für einen Körper festlegen (genauso wie für einen Tr), aber Sie können die Hintergrundfarbe festlegen. Wenn der Effekt, den Sie erzielen möchten, mit einer Hintergrundfarbe für die Zeilengruppen anstelle eines Rahmens erzielt werden kann, funktioniert dies.
quelle
Gruppieren Sie Zeilen mithilfe des
<tbody>
Tags und wenden Sie dann den Stil an.Und das CSS in style.css
quelle
Die einzige andere Möglichkeit, die ich mir vorstellen kann, besteht darin, jede der Zeilen, um die Sie einen Rand benötigen, in eine verschachtelte Tabelle einzuschließen. Dies erleichtert die Erstellung des Rahmens, führt jedoch möglicherweise zu anderen Layoutproblemen. Sie müssen die Breite für Tabellenzellen usw. manuell festlegen.
Abhängig von Ihren anderen Layoutanforderungen ist Ihr Ansatz möglicherweise der beste, und der hier vorgeschlagene Ansatz ist nur eine mögliche Alternative.
quelle
Basierend auf Ihrer Anforderung, dass Sie einen Rand um einen beliebigen Block von MxN-Zellen setzen möchten, gibt es wirklich keinen einfacheren Weg, dies ohne Verwendung von Javascript zu tun. Wenn Ihre Zellen mit fixiert sind, können Sie Floats verwenden, dies ist jedoch aus anderen Gründen problematisch. Was Sie tun, mag langweilig sein, aber es ist in Ordnung.
Ok, wenn Sie an einer Javascript-Lösung mit jQuery (meinem bevorzugten Ansatz) interessiert sind, erhalten Sie diesen ziemlich beängstigenden Code:
Ich nehme gerne Vorschläge zu einfacheren Möglichkeiten an ...
quelle
Der Trick liegt in der Gliederungseigenschaft dank der Antwort von Enigment mit nur geringen Änderungen
Verwenden Sie diese Klasse
dann im HTML
und das Ergebnis ist Hoffnung, dass dies Ihnen hilft
quelle
Eine einfachere Möglichkeit besteht darin, die Tabelle zu einem serverseitigen Steuerelement zu machen. Sie könnten etwas Ähnliches verwenden:
quelle