Wie fixiere ich die Höhe von TR?

102

Ist es möglich, die Höhe einer Zeile (tr) auf einem Tisch festzulegen?

Das Problem tritt auf, wenn ich das Fenster des Browsers verkleinere, einige Zeilen herumspielen und die Höhe der Zeile nicht festgelegt werden kann.

Ich habe verschiedene Möglichkeiten ausprobiert: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Ich benutze IE7

Stil

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

HTML Quelltext.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html html-table row Amra
quelle

Antworten:

97

Tabellen sind zweifelhaft (zumindest im IE), wenn es darum geht, Höhen zu fixieren und keinen Text zu umbrechen. Ich denke, Sie werden feststellen, dass die einzige Lösung darin besteht, den Text divwie folgt in ein Element einzufügen:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
Erweitern Sie das Snippet

Auf diese Weise entspricht die divHöhe der Zelle der enthaltenden Zelle, und der Text kann die Höhe nicht vergrößern div, sodass die Zelle / Zeile unabhängig von der Fenstergröße dieselbe Höhe behält.

Andy E.
quelle
1
Vielen Dank für den Rat, es scheint zu funktionieren, aber es sieht ein bisschen chaotisch aus.
Amra
Gerne helfen wir :-) Leider ist unordentlicher Code bei Hacks und Workarounds normalerweise der Fall.
Andy E
Ich benutze [Code] .container {width: 100%; maximale Höhe: 40px; Überlauf versteckt; } [/ code] und [code] <div class = 'container'> </ div> [/ code].
Cees Timmerman
Ich habe die gleiche Methode angewendet, indem ich ein div in ein <th> -Tag eingefügt habe, und es hat gut funktioniert. Ich hatte dieses Problem nur auf Chrome. FFox, Safari und IE unterstützten die in der Tabellenüberschrift festgelegte Höhe gut. Danke für das Teilen! :)
Mário Rodrigues
funktioniert nicht auf Safari ... Sie müssen die tatsächliche Höhe und Breite auch auf dem Div einstellen, nicht nur auf dem td
Radu Simionescu
15

Versuchen Sie, die Höhe wie folgt in eine der Zellen einzufügen:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Beachten Sie jedoch, dass Sie die Zelle nicht kleiner machen können, als es der Inhalt erfordert. In diesem Fall müssten Sie zuerst den Text verkleinern.

Sack
quelle
1
Ich bin mir ziemlich sicher, dass Sie "px" nicht in HTML-Attributen verwenden.
Unflores
10
Ich bin mir ziemlich sicher, dass Sie in style Attribut verwenden können.
Burak Dobur
11

Stellen Sie die tdHöhe auf weniger als die natürliche Höhe des Inhalts ein

Da Tabellenzellen mindestens groß genug sein möchten, um ihren Inhalt einzuschließen, kann die Größe der Zellen beliebig geändert werden, wenn der Inhalt keine scheinbare Höhe aufweist.

Durch Ändern der Größe der Zellen können wir die Zeilenhöhe steuern.

Eine Möglichkeit, dies zu tun, besteht darin, den Inhalt mit einer absolutePosition innerhalb der relativeZelle festzulegen und die heightder Zelle sowie das leftund topdes Inhalts festzulegen.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
Erweitern Sie das Snippet

Das table-layoutEigentum

Die zweite Tabelle im obigen Snippet wurde table-layout: fixedangewendet, wodurch Zellen unabhängig vom Inhalt innerhalb des übergeordneten Elements die gleiche Breite erhalten.

Laut caniuse.com gibt es ab dem table-layout12. September 2019 keine wesentlichen Kompatibilitätsprobleme hinsichtlich der Verwendung von .

Oder wenden Sie einfachwidth wie in der dritten Tabelle auf bestimmte Zellen an.

Diese Verfahren ermöglichen es, der Zelle, die den durch Anwenden erzeugten effektiv größenlosen Inhalt enthält position: absolute, einen beliebigen Umfang zu geben.

Viel einfacher ...

Ich hätte wirklich von Anfang an daran denken sollen; Wir können den Tabellenzelleninhalt auf Blockebene auf die übliche Weise bearbeiten und ohne die natürliche Größe des Inhalts vollständig zu zerstören position: absolute, die Tabelle verlassen, um herauszufinden, wie breit die Breite sein sollte.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
Erweitern Sie das Snippet

Fred Gandt
quelle
Endlich eine vielversprechende Antwort! Ich muss es versuchen, sobald ich bei der Arbeit bin. Ich werde Feedback geben, wenn ich es nicht vergesse.
Jeromej
1
Lief wie am Schnürchen! (Warnung, dass es entfernt text-align: centerund andere Zentrierungstricks aber ... wie es sich verlässt position: absolute)
jeromej
Dies funktioniert in meinem Fall für die Höhe, aber bei Verwendung postion: absoluteverliere ich die automatische Zellenbreite. Der Versuch, einen Weg zu finden, wie die Tabelle die Zellenbreite noch richtig berechnet, während die Kontrolle über die Zeilenhöhe übernommen wird. Irgendwelche Gedanken?
Asche
@ash - Ich denke nicht sofort über eine Möglichkeit nach, die vollautomatische Breite beizubehalten, nachdem die Größe des Inhalts effektiv zerstört wurde, aber wir können die Tabellenzellen zwingen, beliebig breit zu sein. Ich habe das Beispiel-Snippet erweitert, um eine Methode zu zeigen, die Ihnen helfen könnte. Ich werde noch etwas darüber nachdenken und weitere Details hinzufügen, wenn mir etwas Nützliches einfällt :)
Fred Gandt
Danke Fred. Beachten Sie, dass ich Überschriften (<th>) haben könnte, um den Spalten eine feste Größe zu geben, aber dann befürchte ich, dass die Überschriften zu schmal oder zu breit sind.
Asche
8

Wenn ich div in ein td stecke, funktioniert es für mich. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
user2987600
quelle
2

Ihre Tabellenbreite beträgt 90%, bezogen auf den Container.

Wenn Sie die Seite zusammendrücken, quetschen Sie wahrscheinlich auch die Tabellenbreite. Die Breite der Zellen verringert sich ebenfalls und der Browser gleicht dies durch Erhöhen der Höhe aus.

Um die Höhe unberührt zu lassen, müssen Sie sicherstellen, dass die Breite der Zellen den beabsichtigten Inhalt enthalten kann. Das Korrigieren der Tabellenbreite ist wahrscheinlich etwas, das Sie ausprobieren möchten. Oder spielen Sie mit der Mindestbreite des Tisches.

OK W
quelle
1

Ich musste dies tun, um das gewünschte Ergebnis zu erzielen:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Es weigerte sich, nur mit der Zelle oder dem Div zu arbeiten und brauchte beides.

Jen
quelle
-5

Das liegt daran, dass die Wörter umbrochen werden und neue Zeilen einfügen, wodurch die TR gedehnt wird. Dies sollte Ihr Problem beheben:

overflow:hidden;

Setzen Sie das in die TR-Stile ein. Obwohl es funktionieren sollte, lassen Sie es einfach dehnen

PS. Ich habe es nicht getestet, also hasse XD nicht

Ozzy
quelle
3
Nicht hassen, aber es gibt eine Liste von Stilen, die vom TD-Element im IE unter msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx unterstützt werden . overflowist keiner von ihnen.
Andy E.