Poznaj Freda. On jest stołem:
<table border="1" style="width: 100%;">
<tr>
<td>This cells has more content</td>
<td>Less content here</td>
</tr>
</table>
Mieszkanie Freda ma dziwaczny zwyczaj zmieniania rozmiaru, więc nauczył się ukrywać część swoich treści, aby nie przepychać wszystkich innych jednostek i nie pchać salonu pani Whitford w zapomnienie:
<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
<td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
<td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
</tr>
</table>
To działa, ale Fred ma dokuczliwe wrażenie, że gdyby jego prawa komórka (którą nazywa się Celldito) poświęciła trochę miejsca, jego lewa komórka nie byłaby skracana przez tak długi czas. Czy możesz ocalić jego zdrowie psychiczne?
Podsumowując: Jak komórki tabeli mogą się przepełniać równomiernie i tylko wtedy, gdy wszystkie z nich zrezygnowały z białych znaków?
html
css
overflow
tablelayout
s4y
źródło
źródło
Odpowiedzi:
http://jsfiddle.net/7CURQ/
źródło
<col>
s, przygotowując szerokości do<td>
stylów: jsfiddle.net/7CURQ/64Wierzę, że mam rozwiązanie inne niż javascript! Lepiej późno niż wcale, prawda? W końcu jest to doskonałe pytanie, a Google ma już dość. Nie chciałem zadowolić się poprawką javascript, ponieważ uważam, że drżenie rzeczy poruszających się po załadowaniu strony jest niedopuszczalne.
Funkcje :
Jak to działa : W komórce tabeli umieść dwie kopie treści w dwóch różnych elementach we względnie pozycjonowanym elemencie kontenera. Element dystansowy jest ustawiony statycznie i jako taki wpłynie na szerokość komórek tabeli. Umożliwiając zawijanie zawartości komórki rozdzielającej, możemy uzyskać szerokość „najlepiej dopasowanego” komórek tabeli, których szukamy. To pozwala nam również użyć elementu pozycjonowanego absolutnie, aby ograniczyć szerokość widocznej treści do szerokości elementu pozycjonowanego względnie.
Testowane i działające w: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera
Obrazy wynikowe :
JSFiddle : http://jsfiddle.net/zAeA2/
Przykładowy HTML / CSS :
źródło
title
zamiast,data-spacer
aby uzyskać etykietkę po najechaniu myszką :)Kilka dni temu stanąłem przed tym samym wyzwaniem. Wygląda na to, że Lucyfer Sam znalazł najlepsze rozwiązanie.
Zauważyłem jednak, że powinieneś zduplikować zawartość elementu spacer. Myślałem, że nie jest tak źle, ale chciałbym również zastosować
title
wyskakujące okienko do przyciętego tekstu. A to oznacza, że długi tekst pojawi się po raz trzeci w moim kodzie.Tutaj proponuję uzyskać dostęp do
title
atrybutu z:after
pseudoelementu, aby wygenerować spacer i utrzymać HTML w czystości.Działa na IE8 +, FF, Chrome, Safari, Opera
http://jsfiddle.net/feesler/HQU5J/
źródło
Jeśli JavaScript jest akceptowalny, przygotowałem szybką procedurę, którą możesz wykorzystać jako punkt wyjścia. Dynamicznie próbuje dostosować szerokość komórki za pomocą wewnętrznej szerokości przęsła w reakcji na zdarzenia zmiany rozmiaru okna.
Obecnie zakłada się, że każda komórka zwykle uzyskuje 50% szerokości wiersza i zwinie prawą komórkę, aby utrzymać lewą komórkę na maksymalnej szerokości, aby uniknąć przepełnienia. Można zaimplementować znacznie bardziej złożoną logikę równoważenia szerokości, w zależności od przypadków użycia. Mam nadzieję że to pomoże:
Znaczniki dla wiersza, którego użyłem do testowania:
JQuery, które łączy zdarzenie zmiany rozmiaru:
źródło
Istnieje o wiele łatwiejsze i bardziej eleganckie rozwiązanie.
W komórce tabeli, którą chcesz zastosować obcinanie, po prostu dołącz div kontenera z układem tabeli css: naprawiono. Ten kontener zajmuje całą szerokość komórki tabeli nadrzędnej, więc działa nawet responsywnie.
Pamiętaj, aby zastosować obcinanie elementów w tabeli.
Działa z IE8 +
i css:
oto działający Fiddle https://jsfiddle.net/d0xhz8tb/
źródło
Problemem jest „układ tabeli: naprawiony”, który tworzy kolumny o równej szerokości i stałej szerokości. Ale wyłączenie tej właściwości css zabije przepełnienie tekstu, ponieważ tabela stanie się tak duża, jak to możliwe (i wtedy nie ma przepełnienia).
Przykro mi, ale w tym przypadku Fred nie może dostać swojego ciasta i zjeść go ... dopóki właściciel nie zapewni Celldito mniej miejsca do pracy, Fred nie może użyć swojego ...
źródło
Możesz spróbować „zważyć” niektóre kolumny, takie jak to:
Możesz także wypróbować bardziej interesujące poprawki, takie jak użycie kolumn o szerokości 0% i użycie kombinacji
white-space
właściwości CSS.Masz pomysł.
źródło
Tak, powiedziałbym, że thirtydot ma to, nie da się tego zrobić, chyba że użyjesz metody js. Mówisz o złożonym zestawie warunków renderowania, które będziesz musiał zdefiniować. np. co się stanie, gdy obie komórki stają się zbyt duże dla swoich mieszkań, będziesz musiał zdecydować, kto ma priorytet, lub po prostu dać im procent powierzchni, a jeśli są one przepełnione, oboje zajmą ten obszar i tylko jeśli jedna ma białe znaki, rozciągasz nogi w drugiej komórce, tak czy inaczej, nie ma możliwości zrobienia tego za pomocą css. Chociaż są pewne fajne rzeczy, które ludzie robią z css, o których nie myślałem. Naprawdę wątpię, żebyś mógł to zrobić.
źródło
Podobnie jak w przypadku odpowiedzi samplebias, jeśli JavaScript jest akceptowalną odpowiedzią, stworzyłem wtyczkę jQuery specjalnie do tego celu: https://github.com/marcogrcr/jquery-tableoverflow
Aby użyć wtyczki, po prostu wpisz
Pełny przykład: http://jsfiddle.net/Cw7TD/3/embedded/result/
Edycje:
źródło
Użyj hack css, wydaje się, że
display: table-column;
może przyjść na ratunek:JSFiddle: http://jsfiddle.net/blai/7u59asyp/
źródło
Wystarczy dodać następujące reguły do
td
:Przykład:
PS: Jeśli chcesz ustawić niestandardową szerokość na inną
td
właściwość usemin-width
.źródło
To pytanie pojawia się na górze w Google, więc w moim przypadku użyłem fragmentu css z https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/, ale zastosowanie go do td NIE dało pożądany wynik.
Musiałem dodać znacznik div wokół tekstu w td i elipsa w końcu zadziałała.
Skrócony kod HTML;
Skrót CSS;
źródło
Sprawdź, czy „nowrap” rozwiązuje problem do pewnego stopnia. Uwaga: nowrap nie jest obsługiwany w HTML5
źródło
white-space: nowrap
ma taki sam efekt jaknowrap
atrybut (i używam go w tym przykładzie). Dodanie go tutaj niczego nie zmienia, o ile wiem.możesz ustawić szerokość prawej komórki na minimalną wymaganą szerokość, a następnie zastosować przelew ukryty + przelew tekstowy do wnętrza lewej komórki, ale Firefox jest tutaj wadliwy ...
choć wydaje się, że Flexbox może pomóc
źródło
Ostatnio nad tym pracuję. Sprawdź ten test jsFiddle , spróbuj sam, zmieniając szerokość tabeli podstawowej, aby sprawdzić zachowanie).
Rozwiązaniem jest osadzenie tabeli w innym:
Czy Fred jest teraz zadowolony z rozszerzenia Celldito?
źródło
Nie wiem, czy to pomoże komukolwiek, ale rozwiązałem podobny problem, określając określone rozmiary szerokości w procentach dla każdej kolumny. Oczywiście działałoby to najlepiej, gdyby każda kolumna zawierała treść o szerokości, która nie różni się zbytnio.
źródło
Miałem ten sam problem, ale musiałem wyświetlić wiele wierszy (w przypadku
text-overflow: ellipsis;
niepowodzenia). Rozwiązuję go za pomocątextarea
wewnętrznej a,TD
a następnie projektuję go tak, aby zachowywał się jak komórka tabeli.źródło
Biorąc pod uwagę, że „układ tabeli: ustalony” jest niezbędnym wymogiem układu, że tworzy to równomiernie rozmieszczone nieregulowane kolumny, ale że musisz tworzyć komórki o różnych wartościach procentowych, być może ustawisz „colspan” swoich komórek na wielokrotność?
Na przykład, używając całkowitej szerokości 100 do łatwych obliczeń procentowych i mówiąc, że potrzebujesz jednej komórki 80%, a drugiej 20%, rozważ:
Oczywiście, w przypadku kolumn 80% i 20%, możesz po prostu ustawić zakres szerokości komórki 100% na 5, 80% na 4, a 20% na 1.
źródło
td
s?