Dlaczego overflow: hidden nie działa w <td>?

146

Mam komórkę tabeli, którą zawsze chciałbym mieć określoną szerokość. Jednak nie działa z dużymi ciągami tekstu bez odstępów. Oto przypadek testowy:

td {
  border: solid green 1px;
  width: 200px;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Rozwiń fragment

Jak sprawić, aby tekst został obcięty na krawędzi ramki, zamiast rozszerzać się?

html css

— mikrofon
źródło

205

Tutaj jest ten sam problem .

Trzeba ustawić table-layout:fixed i odpowiedniej szerokości elementu na stole, jak overflow:hiddeni white-space: nowrapna komórkach tabeli.

Przykłady

Kolumny o stałej szerokości

Szerokość tabeli musi być taka sama (lub mniejsza) niż komórki o stałej szerokości.

Z jedną kolumną o stałej szerokości:

Pokaż fragment kodu

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Rozwiń fragment

Z wieloma kolumnami o stałej szerokości:

Pokaż fragment kodu

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 200px;
}
td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Rozwiń fragment

Kolumny o stałej i płynnej szerokości

Należy ustawić szerokość stołu , ale każda dodatkowa szerokość jest po prostu pobierana przez komórki płynu.

Z wieloma kolumnami, stałą szerokością i płynną szerokością:

Pokaż fragment kodu

* {
  box-sizing: border-box;
}
table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  background: #F00;
  padding: 20px;
  border: solid 1px #000;
}
tr td:first-child {
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
}

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

Rozwiń fragment

— misterManSam
źródło

21

Po prostu tacy są TD. Wydaje mi się, że może to być spowodowane tym, że właściwość „display” elementu TD jest nieodłącznie ustawiona na „table-cell”, a nie na „block”.

W twoim przypadku alternatywą może być zawinięcie zawartości TD w DIV i zastosowanie szerokości i przepełnienia do DIV.

<td style="border: solid green 1px; width:200px;">
    <div style="width:200px; overflow:hidden;">
        This_is_a_terrible_example_of_thinking_outside_the_box.
    </div>
</td>

Mogą wystąpić pewne problemy z wypełnianiem lub wypełnianiem komórek i lepiej jest usunąć style wbudowane i zamiast tego użyć zewnętrznego css, ale to powinien być początek.

— Andy Ford
źródło

To działa, ale przegrywam vertical-align:middlei nawet dodanie go do DIV nie rozwiązuje problemu.

— Michael,

10

Zastosuj CSS table-layout:fixed;(i czasami width:<any px or %>) do TABLE i white-space: nowrap; overflow: hidden;styl na TD. Następnie ustaw szerokości CSS na odpowiednich elementach komórki lub kolumny.

Co ważne, szerokości kolumn tabeli o stałym układzie są określane przez szerokości komórek w pierwszym wierszu tabeli. Jeśli w pierwszym wierszu znajdują się elementy TH, a szerokości są stosowane do TD (a nie TH), wówczas szerokość dotyczy tylko zawartości TD (odstępy i przepełnienie można zignorować); kolumny tabeli będą dystrybuowane równomiernie niezależnie od ustawionej szerokości TD (ponieważ nie określono szerokości [na TH w pierwszym wierszu]), a kolumny będą miały [obliczone] równe szerokości; tabela nie przeliczy szerokości kolumny na podstawie szerokości TD w kolejnych wierszach. Ustaw szerokość pierwszych elementów komórki, które napotka tabela.

Alternatywnie i najbezpieczniejszym sposobem ustawienia szerokości kolumn jest użycie <COLGROUP>oraz <COL>tagi w tabeli z CSS szerokość zestawu na każdej stałej szerokości COL. CSS związany z szerokością komórki działa lepiej, gdy tabela zna z wyprzedzeniem szerokości kolumn.

— szozz
źródło

7

Nie jestem zaznajomiony z konkretnym problemem, ale możesz umieścić element div itp. W td i ustawić na nim przepełnienie.

— Oli
źródło

5

Oto rozwiązanie dla Ciebie, ale nie bardzo rozumiem, dlaczego to działa:

<html><body>
  <div style="width: 200px; border: 1px solid red;">Test</div>
  <div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels.  These pretzels are making me thirsty.</div>
  <div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
  This_is_a_terrible_example_of_thinking_outside_the_box.
  </div>
  <table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
   <td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
    This_is_a_terrible_example_of_thinking_outside_the_box.
   </div></td>
  </tr></table>
</body></html>

Mianowicie zawijanie zawartości komórki w element div.

— cletus
źródło

Można to jeszcze bardziej ulepszyć, jak pokazano tutaj - w szczególności overflow:hiddenmożna go usunąć td, a szerokość divmożna ustawić na 100%, aby działała z dowolną tdszerokością (w tym automatycznie dopasowywaną!)

— Roman Starkov,

4

Najlepszym rozwiązaniem jest umieszczenie elementu div w komórce tabeli o zerowej szerokości. Komórki tabeli Tbody odziedziczą swoje szerokości z szerokości zdefiniowanych w thead. Pozycja: względny i ujemny margines powinien załatwić sprawę!

Oto zrzut ekranu: https://flic.kr/p/nvRs4j

<body>
<!-- SOME CSS -->
<style>
    .cropped-table-cells,
    .cropped-table-cells tr td { 
        margin:0px;
        padding:0px;
        border-collapse:collapse;
    }
    .cropped-table-cells tr td {
        border:1px solid lightgray;
        padding:3px 5px 3px 5px;
    }
    .no-overflow {
        display:inline-block;
        white-space:nowrap;
        position:relative; /* must be relative */
        width:100%; /* fit to table cell width */
        margin-right:-1000px; /* technically this is a less than zero width object */
        overflow:hidden;
    }
</style>

<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
    <thead>
        <tr>
            <td style="width:100px;" width="100"><span>ORDER<span></td>
            <td style="width:100px;" width="100"><span>NAME<span></td>
            <td style="width:200px;" width="200"><span>EMAIL</span></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="no-overflow">123</span></td>
            <td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
            <td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
    </tbody>
</table>
</body>

— Gyula Surmann
źródło

Powinieneś używać zarówno span, jak i div, oczywiście mając odpowiednie ustawienia bloków dla zakresu zadeklarowanego w css. Jak wiem, td powinno również zawierać div.

— Gyula Surmann

3

Będziesz musiał ustawić atrybuty stylu tabeli: widthi table-layout: fixed;pozostawić opcję „overflow: hidden;” atrybut działa poprawnie.

Imo to działa lepiej niż używanie elementów div z widthatrybutem style, zwłaszcza gdy używasz go do dynamicznych obliczeń zmiany rozmiaru, tabela będzie miała prostszy DOM, co ułatwia manipulację, ponieważ nie są wymagane korekty dopełnienia i marginesów

Dodatkowo nie musisz ustawiać szerokości dla wszystkich komórek, ale tylko dla komórek w pierwszym rzędzie.

Lubię to:

<table style="width:0px;table-layout:fixed">
<tr>
    <td style="width:60px;">
        Id
    </td>
    <td style="width:100px;">
        Name
    </td>
    <td style="width:160px;overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
<tr>
    <td style="">
        Id
    </td>
    <td style="">
        Name
    </td>
    <td style="overflow:hidden">
        VeryLongTextWhichShouldBeKindOfTruncated
    </td>
</tr>
</table>

— Wilko Gesink
źródło

2

Właśnie miałem podobny problem i musiałem najpierw użyć <div>wnętrza <td>(rozwiązanie Johna MacIntyre'a nie zadziałało dla mnie z różnych powodów).

Zwróć jednak uwagę, że <td><div>...</div></td>to nie jest prawidłowe miejsce docelowe dla elementu div, więc zamiast tego używam <span>z display:block;zestawem. Sprawdza się teraz dobrze i działa.

— Zwykły rozwój
źródło

1

Najłatwiejsze i najprostsze rozwiązanie, które działa:

table { table-layout: fixed }

table td {     
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

— Armin
źródło

0

aby uprościć, proponuję umieścić obszar tekstowy wewnątrz td, który automatycznie zarządza przepełnieniem

<td><textarea autofocus>$post_title</textarea></td>

wymagają poprawy

— Gilles Blanchard
źródło

0

<style>
    .col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
    <tr>
        <td class="col">123456789123456789</td>
    </tr>
</table>

wyświetla 123456

— Francesco Ruffo de Bonneval
źródło