Mam problemy z tabelą html, która przepełnia kontener rodzica. Mam konfigurację a sample jsfiddle here, aby zilustrować problem.100% szerokość przepełnionego stołu div kontenera
W jaki sposób można wymusić zarówno tekst nagłówka, jak i tekst komórki tabeli, tak aby pasował do właściwego kontenera? Wolałbym metodę tylko CSS, ale jestem również otwarty na używanie Javascript (lub jQuery), jeśli jest to absolutnie konieczne.
Dodaj display: block; i overflow: auto; do .my-table. Spowoduje to po prostu odcięcie czegokolwiek poza określonym limitem 280px. Nie ma sposobu, aby "wyglądać ładnie" z tym wymaganiem ze względu na słowa takie jak pélagosthrough, które są szersze niż 280px.
Cóż, biorąc pod uwagę twoje ograniczenia, myślę, że ustawienie overflow: scroll; na .page div jest prawdopodobnie Twoją jedyną opcją. 280 pikseli jest dość wąskie, a biorąc pod uwagę rozmiar czcionki, samo zawijanie słów nie będzie tego robić. Niektóre słowa są długie i nie można ich zawijać. Możesz albo drastycznie zmniejszyć rozmiar czcionki, albo przejść z przepełnieniem: przewiń.
spróbuj dodać
word-break: break-all
do CSS na elemencie tabeli.
To spowoduje, że słowa w komórkach tabeli będą łamane w taki sposób, że tabela nie będzie szersza niż jej zawierająca div, ale kolumny tabeli są nadal wymiarowane dynamicznie. jsfiddle demo.
spróbuj dodać do td:
display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify
przelało TDS będzie dostosowanie do nowego wiersza.
Problem polega na tym, że ta metoda powoduje, że wszystkie kolumny mają tę samą szerokość, a nie idealnie idealne. –
@SerjSagan Ustawia ona tylko taką samą szerokość kolumn, ponieważ nie ustawiliśmy jawnie szerokości dla żadnej kolumny. W przypadku braku szerokości kolumny algorytm o stałej szerokości rozkłada pozostałą szerokość tabeli równomiernie pomiędzy niezsynchronizowanymi kolumnami. W tym przypadku jest to 100% szerokości stołu w 5 kolumnach. To jest pewien punkt "table-layout: fixed" ... układ jest przewidywalny i nie dostosowuje się do zawartości. Albo określ szerokość kolumn, albo algorytm decyduje o tobie. – canon
@canon Właśnie stwierdziłem, że to nie działa, gdy zmieniasz rozmiar komórki o minimalnej szerokości, przynajmniej w Chrome. Zobacz http://jsfiddle.net/dtttLqgw/1/. – needfulthing