Jak ustalić wysokość TR?

102

Czy można ustalić wysokość wiersza (tr) na stole?

Problem pojawia się, gdy zmniejszam okno przeglądarki, niektóre wiersze zaczynają się bawić i nie mogę ustalić wysokości wiersza.

Próbowałem na kilka sposobów: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Używam IE7

Styl

.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;
}

Kod HTML.

<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
źródło

Odpowiedzi:

97

Tabele są niepewne (przynajmniej w IE), jeśli chodzi o ustalanie wysokości, a nie zawijanie tekstu. Myślę, że jedynym rozwiązaniem jest umieszczenie tekstu wewnątrz divelementu, na przykład:

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>
Rozwiń fragment

W ten sposób divwysokość jest wysokością komórki zawierającej, a tekst nie może powiększyć się div, utrzymując komórkę / wiersz na tej samej wysokości bez względu na rozmiar okna.

Andy E.
źródło
1
Dzięki za radę, wydaje się działać, ale wygląda na trochę niechlujną.
Amra
Chętnie pomogę :-) Niestety, niechlujny kod występuje zwykle w przypadku hacków i obejść.
Andy E
Używam [kod] .container {szerokość: 100%; max-height: 40px; przepełnienie: ukryte; } [/ code] i [code] <div class = 'container'> </div> [/ code].
Cees Timmerman
Zrobiłem tę samą metodę, umieszczając element div w tagu <th> i zadziałała dobrze. Miałem ten problem tylko w Chrome. FFox, Safari i IE dobrze obsługiwały wysokość ustawioną w nagłówku tabeli. Dzięki za udostępnienie! :)
Mário Rodrigues
nie działa w safari ... musisz ustawić rzeczywistą wysokość i szerokość również na div, nie tylko td
Radu Simionescu
15

Spróbuj wpisać wysokość do jednej z komórek, na przykład:

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

Pamiętaj jednak, że nie będziesz w stanie zmniejszyć rozmiaru komórki, niż wymaga tego zawartość. W takim przypadku musiałbyś najpierw zmniejszyć tekst.

szturchać
źródło
1
Jestem pewien, że nie używasz „px” w atrybutach html.
unflores
10
Jestem prawie pewien, że możesz użyć atrybutu stylu.
Burak Dobur
11

Ustawienie tdwysokości na mniejszą niż naturalna wysokość zawartości

Ponieważ komórki tabeli chcą być co najmniej wystarczająco duże, aby zamknąć swoją zawartość, jeśli zawartość nie ma widocznej wysokości, rozmiar komórek można dowolnie zmieniać.

Zmieniając rozmiar komórek, możemy kontrolować wysokość wiersza.

Jednym ze sposobów jest ustawienie zawartości z absolutepozycją w relativekomórce oraz ustawienie heightkomórki i lefti topzawartości.

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>
Rozwiń fragment

table-layoutnieruchomość

Zastosowano drugą tabelę w powyższym fragmencie table-layout: fixed, co powoduje, że komórki mają równą szerokość, niezależnie od ich zawartości, w obrębie elementu nadrzędnego.

Według caniuse.comtable-layout od 12 września 2019 r. Nie występują żadne istotne problemy z kompatybilnością .

Lub po prostu zastosuj widthdo określonych komórek, jak w trzeciej tabeli.

Metody te pozwalają komórce zawierającej skutecznie pozbawioną rozmiarów treść utworzoną przez zastosowanie position: absolutedowolnego obwodu.

O wiele prościej ...

Naprawdę powinienem był o tym pomyśleć od samego początku; możemy manipulować zawartością komórki tabeli na poziomie bloku na wszystkie zwykłe sposoby i bez całkowitego niszczenia naturalnego rozmiaru zawartości za pomocą position: absolute, możemy opuścić tabelę, aby ustalić, jaka powinna być szerokość.

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>
Rozwiń fragment

Fred Gandt
źródło
Wreszcie odpowiedź, która wygląda obiecująco! Muszę spróbować, jak tylko będę w pracy, udzielę informacji zwrotnej, jeśli nie zapomnę.
jeromej
1
Działał jak urok! (Ostrzeżenie, ale usuwa text-align: centeri inne sztuczki centrujące… na czym polega position: absolute)
jeromej
Działa to dla wysokości w moim przypadku, ale podczas używania postion: absolutetracę automatyczną szerokość komórki. Próbuję znaleźć sposób, aby tabela nadal poprawnie obliczała szerokość komórki, jednocześnie przejmując kontrolę nad wysokością wiersza. jakieś pomysły?
popiół
@ash - nie myślę od razu o jakimkolwiek sposobie zachowania w pełni automatycznej szerokości po skutecznym zniszczeniu rozmiaru zawartości, ale możemy wymusić dowolną szerokość komórek tabeli. Rozszerzyłem przykładowy fragment kodu, aby pokazać jedną metodę, która może ci pomóc.
Zastanowię się
Dzięki Fred. Zauważ, że mógłbym mieć nagłówki (<th>), aby nadać kolumnom stały rozmiar, ale wtedy obawiam się, że nagłówki mogą być zbyt wąskie lub zbyt szerokie.
popiół
8

Umieszczenie div wewnątrz td sprawiło, że zadziałało. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
user2987600
źródło
2

Twoja szerokość stołu wynosi 90% w stosunku do jego kontenera.

Jeśli ściśniesz stronę, prawdopodobnie ściskasz również szerokość tabeli. Szerokość komórek również się zmniejsza, a przeglądarka kompensuje, zwiększając wysokość.

Aby wysokość pozostała nietknięta, musisz upewnić się, że szerokości komórek mogą pomieścić zamierzoną zawartość. Prawdopodobnie chcesz spróbować naprawić szerokość stołu. A może pobaw się minimalną szerokością stołu.

okw
źródło
1

Musiałem to zrobić, aby uzyskać wynik, którego chciałem:

<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>

Odmówił pracy tylko z komórką lub elementem div i potrzebował obu.

Jen
źródło
-5

Dzieje się tak, ponieważ słowa zawijają się i przechodzą w nowe linie, a tym samym rozciągają TR. To powinno rozwiązać problem:

overflow:hidden;

Umieść to w stylach TR Chociaż powinno to działać, dlaczego nie pozwolić mu po prostu rozciągnąć się o0

PS. Nie testowałem tego, więc nie nienawidzę XD

Ozzy
źródło
3
Nie hejtując, ale jest lista stylów obsługiwanych przez element TD w IE pod adresem msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflownie jest jednym z nich.
Andy E,