Split td in zwei
Ich versuche zu Spalten TD (Tabellenzelle), um Aussehen, als ob es waren zwei Zellen. Das problem ist, dass wenn die Zelle wächst in die Höhe, ich kann den zwei divs zu besetzen, um alle verfügbaren Höhe. Da diese Zellen können dynamisch wachsen ich kann nicht eine Feste Höhe entweder (das könnte das Problem lösen).
Hier ist mein code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
#span1 { background-color: #DDD; width: 25px; float: right; }
#span2 { background-color: #EEE; width: 24px; float: left; }
.t { border-top: 1px solid black; }
.r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>Dies ist, wie es aussieht:
Will ich nicht sehen, die weißen Lücken in Spalte, 3.
Irgendwelche Ideen wie man dieses Problem lösen?
Ich habe fightting mit CSS für eine Weile ohne Glück so weit ...
Dank!.
Und tatsächlich die Spaltung der tds ist nicht eine option? Dann die "3" auf der Oberseite könnte in einer td mit
Meinst du, durch die Verwendung von colspan und/oder rowspan? Wenn das der Fall ist, dann Nein, das ist keine option. Zwar konnte ich setzen, was ich will, im inneren der Zellen (ohne ändern der Anzahl der Spalten/Zeilen)
colspan="2".Meinst du, durch die Verwendung von colspan und/oder rowspan? Wenn das der Fall ist, dann Nein, das ist keine option. Zwar konnte ich setzen, was ich will, im inneren der Zellen (ohne ändern der Anzahl der Spalten/Zeilen)
InformationsquelleAutor Matías | 2012-04-23
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
sollten Sie legen Sie die height-td height=100%, und .span1 set Höhe=100%, dann versuchen Sie, diesem können Sie eine Antwort erhalten..
InformationsquelleAutor ram
Versuchen Sie
kann oder auch nicht brauchen, um hinzuzufügen, Höhe 100% als gut.
Auch gibt es keine Möglichkeit, Sie konnte einfach 2 td ' s, anstatt zu versuchen, zu imitieren, 2??
InformationsquelleAutor Simon McLoughlin
kann man sich die Tabelle in dieser Tabelle die Zelle, dann, dass die innere Tabelle, die Sie tun können, was Sie wollen, wie
td colspan="2"für die oberste Zeile und td td für die untere Zeile (das erinnert mich an die hässlichen Tage-Tisch-layout, aber was für Sie arbeitet!)Nein, er ist Recht, werden Sie wahrscheinlich benötigen, um alle entfernen die Polsterung / Margen in der Tabelle, geht hinein, aber ja, das hört sich gut an. Allgemeine Faustregel in html = Tabellen sind böse und nie das tun, was Sie wollen, Sie zu vermeiden, wenn möglich. Nehmen Sie jede Lösung, die Ihnen jemand, dass die Arbeit
InformationsquelleAutor Rodolfo
Ich habe auch schon auf der Suche nach einem Weg, um eine split TD (Table Data Cell). Nach dem Lesen vieler Beiträge und nach mehreren gescheiterten versuchen, endlich habe ich es geknackt. Vielen Dank an alle, die gepostet haben bisher, wie es um Ihren Verdienst, dass ich in der Lage war, die Punkte zu verbinden.
Gibt es zwei Dinge, die Sie brauchen, um im Auge, Auswirkungen auf Kopfzeile, und die Resultierende Datenzeile. Was ich durch dieses bedeute, ist, dass die Zellen in der obersten Zeile [Auswirkungen auf Kopfzeilen] , verwenden Sie 'colspan' unmittelbar die Zellen in den Zeilen unter der [daraus Resultierende Datenzeile]. So zum Beispiel, Wenn mein resultierende Zeile (2. Zeile) enthalten muss, split TDs, dann ist es beeinflusst durch die Zeile oben, die verwendet 'colspan' in seinem TDs (1. Zeile). Aber wenn die folgende Zeile (3. Zeile) muss davon nicht betroffen sein durch die 'colspan' aus der 1. Reihe, Zellen in der folgenden Zeile (3. Zeile) müssen die gleiche 'colspan' Attribute als die Zellen in der 1. Zeile, das verhindert, dass Sie split und macht Sie 'span' die regelmäßige Lücke.
In der Bild [klicken Sie auf den link, um zu sehen, Bild], ich habe nur 2 Spalten [2. und 4. Spalten], die Aufspaltung TDs unter Ihnen. In der 1. Zeile ich 'colspan', um auf die Zeilen unten. Jedoch, ich will nicht die 2. und 3. Zeilen aufgeteilt, so haben Sie die gleichen "colspans", wie die 1. Reihe. Ich möchte die geteilten Zellen in der 4. und 5. Zeilen [in der 2. und 4. Spalten nur natürlich], so dass um dies zu erreichen, Sie enthalten keine 'colspan' - Attribute, die macht Sie betroffenen, die durch die Zeilen vor denen, die wollen, verwenden Sie 'colspan'. Die 6. Zeile wird nicht durch die "colspans" aus den vorherigen Zeilen, denn es enthält die gleichen 'colspan' Attribute als die ersten 3 Zeilen. Die 7. und Letzte Zeile enthält split TDs, weil es, wie die Zeilen 4 und 5, enthält keine "colspans'. Dies kann verwirrend klingen, aber wenn Sie das Bild betrachten und versuchen, den source-code, ich denke, Sie werden sehr zufrieden sein. Ich hoffe, das hilft.
https://www.flickr.com/photos/12121792@N02/sets/72157651047314439/
InformationsquelleAutor Xylon Draganthus