Kraft <tr> Höhe mit CSS

Brauche ich zum Steuern der Höhe einer Tabellenzeile--ich habe versucht, die Einstellung der Höhe der Zellen, aber ich bin der Kollision mit einem Backsteinmauer. Siehe demo.

tr.fixedRow,
tr.fixedRow td.fixedCell {
     height: 50px;
     overflow: hidden; }

Ich weiß, dass ich ändern könnte, das display an, einige Dinge zu block aber damit in der Regel vermasselt die Tabelle in einem schlechten Weg--ich arbeite mit einem ziemlich komplizierte Tabelle, die in Wechselwirkung mit anderen Tischen in der Nähe und muss zum line-up-pixel-perfekt, so allgemein, ändern der display und dann versuchen, machen es Aussehen wie eine Tabelle, wieder mit CSS ist auch keine gute Lösung für mich, weil Sie nicht übereinstimmen. Ich brauche es, um zu bleiben eine Tabelle.

Möchte ich auch vermeiden, dies zu tun:

<td><div>
   ... cell content...
</div></td>

Scheint, wie schreckliche form. Sicherlich gibt es eine CSS-Lösung zu etwas, das so einfach?

  • AFAIK, kann man die Kraft einer Höhe mit dem HTML height-Attribut...
  • nicht so Aussehen mag.
  • Noch nicht geprüft, aber das sieht ähnlich aus: stackoverflow.com/questions/1554928/...
  • das eine ist in der Nähe, aber er wollte, dass die Tabelle eine Zeile, und die Antworten, die alle reflektieren, dass (z.B. Verwendung von white-space:nowrap; oder die Steuerung der Breite, um die Höhen übereinstimmen). Ich bin auf der Suche zu geben, eine Zeile einer beliebigen Höhe, so dass Lösungen zu dieser Frage nicht helfen mir viel.
  • Brauchen Sie die Breite der Spalte bestimmt werden, vor der Zeit? Wenn nicht, können Sie es zu einem gewissen Prozentsatz, und legen Sie die Zelle auf position:relative und legen Sie ein div drin, die hat width:100%;position:absolute. Würde das funktionieren?
  • Sie könnte etwas sein mit dem Einsatz von position, aber wenn ich dabei bin, nest eine <div> unter der <td>s, dann alles, was ich brauchen, um es zu arbeiten, wie ich will, ist .fixedCell > div {height:50px;overflow:hidden;}.
  • Oh. Ich habe Total verpasst, dass ein Teil Ihrer Frage, sorry. Ich glaube nicht, dass das so schrecklich. Es ist dumm, dass die height CSS-Eigenschaft funktioniert nicht auf tds oder trs mit überlauf, ich bin völlig einverstanden, aber wenn das verschachtelte div funktioniert, es funktioniert. 🙂
  • Es ist schrecklich nicht bei allen - es ist schlechte form zu verwenden, unnötige Elemente, aber das ist nicht einer. Ein Teil der Grund, die td element nicht akzeptieren, gerade Höhen - /überlauf-Deklarationen ist, dass die Höhe nicht unabhängig: Sie ist betroffen durch die anderen Zellen in der Zeile. Analysieren Sie den Inhalt und die CSS und der Einhaltung breiten/Höhen wie ein block-element wäre wirklich Komplex.

InformationsquelleAutor brentonstrine | 2012-10-30
  1. 13

    Sie versuchen dies zu erreichen indem man sich auf eine css-Eigenschaft, die nicht so funktionieren, wie Sie es erwarten: CSS overflow gilt für block-level-Elemente, etwas, was <td> ist nicht (css: display: table-cell;).

    sehen CSS Overflow auf MDN

    Aus diesem Grund glaube ich, dass Sie nicht in der Lage zu erreichen, Feste Höhe, es sei denn, Sie setzen display: block; auf <td>s - und Sie sagte, Sie kann nicht, wie es brechen würde die Tabelle Ausrichtung, so dass die einzige sinnvolle alternative wäre meiner Meinung nach:

    <td><span>...</span></td>

    mit Ihrem <span> eingestellt display: block; (macht nicht wirklich einen Unterschied machen, um eine Zeitspanne zum sperren statt ein div, abgesehen von der Tatsache, dass ein div brechen würde die html-Validierung, die während einer Zeitspanne würde nicht - block-Elemente dürfen nicht in td Elemente)

    es ist die elegante und gültig, so kann ich mir vorstellen.

    • Hätte es nicht besser machen können.
    • Ich sehe nicht ein, warum die Einstellung der span zu display: block; würde halten Sie es von Validierung...
    • in der Tat, ich denke, meine Antwort war nicht besonders klar in diesem Bereich, aber was ich meinte war, dass ein div werfen würde ein Fehler bei der überprüfung; eine span wird nicht werfen solche Fehler natürlich, denn es ist nicht ein block-element - w3c Spezifikation und deren Umsetzung in die validation tool(s) kümmert sich nicht, wenn die display Eigenschaft block via CSS. Werde ich ändern, meine Antwort deutlicher machen!
    InformationsquelleAutor Luca
Schreibe einen Kommentar