Lock Tabelle Zellen auf Ihre Standard-Größe, die unabhängig vom Inhalt

Wenn ich

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

und

table
    { width: 100%; height: 100%; }

Jede Zelle nimmt einen gleich Viertel der Tabelle, und die Tabelle reicht um das Fenster zu passen.

Wie kann ich verhindern, dass diese Zellen aus der Größenänderung von selbst passen sich die Inhalte in den Zellen (während noch der Einbau der Tabelle im container)?

InformationsquelleAutor Nick | 2011-01-11

15

Könnten Sie versuchen table-layout:fixed; - dies setzt das layout auf eine bestimmte Feste Größe (angegeben in CSS) und ignoriert den Inhalt der Zellen, so dass die Breite der Zelle ändert sich nie. Ich bin mir nicht sicher, ob sich dies auf vertikale Anordnung oder nicht.

Mehr info auf w3schools.
- Du hast Recht-es funktioniert auf horizontale breiten, aber nicht vertikal. Ich fühle mich wie CSS ist nutzlos, selbst für die einfachsten Dinge. Ich versuche nur, um einen Kalender!
- Keine Lösung für die vertikale?
- Ich denke, dass meine Antwort auf diese Frage funktioniert für sowohl vertikale als auch.
InformationsquelleAutor whostolemyhat

Ich es geschafft habe, dies zu tun, ohne festen Tisch-layout.
Die Zelle ist css:

.dataCell {
  display: table-cell;
  padding: 2px 15px 2px 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
  max-width: 1px;
}

InformationsquelleAutor Galvani

2

Können Sie es mit position: absolute auf den Inhalt jeder Zelle in der Tabelle: denn wenn man dann die Größe des Inhalts nicht auf die Größe der Zelle.

Um dies zu tun, müssen Sie dann auch die position der Zellen der Tabelle (also, die absolute Positionierung der Inhalte ist relativ zu der Zelle in der Tabelle) -- und/oder zur Unterstützung Firefox, position ein zusätzliches div innerhalb von Zellen der Tabelle seit Firefox lässt Sie nicht anwenden position zu die Zellen selbst.

Zum Beispiel bin ich mit diesem HTML:
```
<td><div class="bigimg"><img src="...."/></div></td>
```
Zusammen mit dem folgenden CSS, so dass die Größe des Bildes hat keinen Einfluss auf die Größe der Zelle, die ihn enthält:
```
div.bigimg
{
    height: 100%;
    width: 100%;
    position: relative;
}
div.bigimg > img
{
    position: absolute;
    top: 0;
    left: 0;
}
```
Ich die height und width von div.bigimg zu 100% entsprechend der Größe der td enthält es, denn ich bin mit JavaScript, um die Größe der Bilder zur Laufzeit zu passen Ihre Container, die die div.bigimg.

Hier ist ein weiteres Beispiel, Verwendung von text statt Bilder-das gleiche Prinzip aber, D. H. position: absolute inside position: relative im inneren jeder Zelle und die Zellen passen nicht auf den Inhalt.
- Gibt es irgendeine Erklärung, WARUM dies erforderlich wäre? eine 3x3-Tabelle scheint die Größe, obwohl das Bild passt schon in die Tabellenzelle!
- Ich verstehe nicht, Ihren Kommentar/Frage. Vielleicht könnten Sie veröffentlichen es als neue Frage.
- Ich sehe nicht, warum -- wenn der Zellinhalt ist position: absolute dann ist es nicht mehr wirklich zufrieden ist, ist es, also nicht mehr positioniert sich als ein Kind der Zelle. Sind Sie sicher, dass Ihr Handy Inhalt 'position:absolute` (siehe z.B. die HTML-und CSS-Code in meine Antwort)?
- Wickeln Sie jeden p innerhalb eines div zu erstellen; das div die position relative, und stellen Sie die p position absolute. Die Tabelle wird dann das layout so, dass es nichts im inneren jeder Zelle (also Zellen zu klein für den Inhalt, es sei denn, Sie die Größe ändern), die scheinbar leeren div-Element positioniert wird, das in jeder Zelle, und die Absätze positioniert werden (aber nicht auf die Größe an) die einzelnen div.
- Ich habe eine korrigierte version von deinem Beispiel auf die obige Antwort.
InformationsquelleAutor ChrisW
1

Könnten Sie versuchen, wählen Sie eine einzelne Zelle zu kauen, bis alle den Raum und auf 100% Höhe und Breite:
```
<table>
    <tr>
        <td>Hi There.</td>
        <td>x</td>
    </tr>
    <tr>
        <td>Here is some text.</td>
        <td class="space-hog"></td>
    </tr>
</table>
```
und einige CSS:
```
table {
    width: 100%;
    height: 100%;
}
td {
    white-space: nowrap;
}
td.space-hog {
    width: 100%;
    height: 100%;
}
```
Und ein live-Beispiel. Sie müssen vorsichtig sein, zu vermeiden unangenehme Zeilenumbruch, wenn .space-hog seine Sache macht, damit die white-space: nowrap. Wenn Sie die .space-hog in der letzten Zeile dann vermeiden Sie drängen die interessanten Teile nach unten.
- Ich bin nicht zu versuchen, um eine Zelle zu nehmen, bis alle den Raum-und das möchte ich je Zelle, die gleiche Breite und Höhe unabhängig von deren Inhalt.
- Okay, es war nicht klar für mich. Ich glaube nicht, dass es eine Art zu sagen: "alle diese Dinge, die die gleiche Größe" in der CSS, die Sie haben, zu sagen: "all diese Dinge Wpx breit und Hpx groß" und berechnen Sie die Abmessungen selbst auf dem server oder in JavaScript. Vielleicht liefern mehr Kontext in die Frage, und jemand könnte kommen mit einem ganz neuen Ansatz, vermeidet Tabelle Dimensionierung kludges ganz.
InformationsquelleAutor mu is too short

Können Sie auch sperren Sie die Zellen um einen Prozentsatz, um die Reaktionsfähigkeit, z.B.:

  td:first-child, th:first-child {
    width: 20%;
  }
  //assuming you have 8 remaining columns (20 + 10*8 = 100%)
  td:not(:first-child), th:not(:first-child) {
    width: 10%;
  }

InformationsquelleAutor Vinnie James

0

td{ width:50%; } funktionieren erst kommt der Tisch klein genug.
- Was ist, wenn ich weiß nicht die Anzahl der Zeilen oder Spalten im Voraus? Ich habe mit Javascript zu geben, jede Zelle einen Prozentsatz der Breite und Höhe, kann aber nicht mehr tun.
- Ich kann nicht glauben, eine Reine HTML - /CSS-Lösung, werden Sie wahrscheinlich benötigen Javascript. Sie könnten versuchen, zu spielen mit der CSS overflow Eigenschaft.
InformationsquelleAutor Jake
0

Etwas entlang der Linien von mit overflow:hidden; vielleicht?

InformationsquelleAutor nchpmn
-2

Hinzufügen table-layout:fixed; auf den Tisch-styling.

Wenn Sie bemerken dies hilft zu beheben die Breite aber nicht die Höhe, das ist, weil es möglicherweise existieren noch irgendeine Art von Polsterung in jedem td-Zelle. Hinzufügen padding:0px; dem td-styling.

InformationsquelleAutor Amy Liu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.