Chcę zapobiec łamaniu linii w kolumnie tabeli, a nie w jednej komórce.
Steven
11
Więc dodać to do każdej komórki w kolumnie?
David M
Dodaj klasę do każdej komórki td, do której chcesz to zastosować, jeśli nie chcesz, aby była stosowana do każdej komórki w tabeli, ale tylko do określonych.
James Black
Chcę go zastosować do wszystkich komórek w tej samej kolumnie.
Steven
7
Możesz zastosować tę regułę wraz z n-tym selektorem elementu
Zach Lysobey
36
Ze względu na kompletność:
#table_id td:nth-child(2) {white-space: nowrap;}
Służy do stosowania stylu do 2 kolumn the table_idtabeli.
Jest to obsługiwane przez wszystkie główne przeglądarki, IE zaczęło to obsługiwać od IE9.
Czy nie dotyczy to całej tabeli (tj. WSZYSTKICH kolumn), a nie tylko pojedynczej kolumny?
Joshua Pinter
15
Można to zrobić na kilka sposobów; żaden z nich nie jest prostą, oczywistą drogą.
Stosowanie spacji: nowrap do <col>nie zadziała; tylko cztery właściwości CSS działają na <col>elementach - kolor tła, szerokość, obramowanie i widoczność. IE7 i wcześniejsze były używane do obsługi wszystkich właściwości, ale to dlatego, że używali dziwnego modelu tabeli. IE8 pasuje teraz do wszystkich innych.
Jak więc to rozwiązać?
Cóż, jeśli możesz zignorować IE (w tym IE8), możesz użyć :nth-child()pseudoklasy do wybrania określonych <td>adresów z każdego wiersza. Używałbyś td:nth-child(2) { white-space:nowrap; }. (Działa to w tym przykładzie, ale nie działałoby, gdyby były zaangażowane jakiekolwiek rozpiętości wierszy lub zakresów współrzędnych).
Jeśli musisz wspierać IE, to musisz przejść długą drogę i zastosować klasę do wszystkiego <td>, na co chcesz wpłynąć. To jest do bani, ale to są przerwy.
Na dłuższą metę istnieją propozycje naprawienia tego braku w CSS, tak aby można było łatwiej stosować style do wszystkich komórek w kolumnie. Będziesz mógł zrobić coś takiego td:nth-col(2) { white-space:nowrap; }i zrobi to, co chcesz.
<tableclass="blueTable"><tr><td>My name is good</td></tr></table><style>
table.blueTable td,
table.blueTable th {white-space: nowrap;/* non-question related further styling */border:1px solid #AAAAAA;padding:3px2px;text-align: left;}</style>
To jest przykład użycia właściwości white space z wartością nowrap, bluetable jest klasą tabeli, poniżej tabeli są style CSS.
Odpowiedzi:
Możesz użyć spacji w stylu CSS:
źródło
Ze względu na kompletność:
Służy do stosowania stylu do 2 kolumn
the table_id
tabeli.Jest to obsługiwane przez wszystkie główne przeglądarki, IE zaczęło to obsługiwać od IE9.
źródło
Użyj stylu nowrap:
To CSS!
źródło
Poprostu dodaj
Przykład:
źródło
Można to zrobić na kilka sposobów; żaden z nich nie jest prostą, oczywistą drogą.
Stosowanie spacji: nowrap do
<col>
nie zadziała; tylko cztery właściwości CSS działają na<col>
elementach - kolor tła, szerokość, obramowanie i widoczność. IE7 i wcześniejsze były używane do obsługi wszystkich właściwości, ale to dlatego, że używali dziwnego modelu tabeli. IE8 pasuje teraz do wszystkich innych.Jak więc to rozwiązać?
Cóż, jeśli możesz zignorować IE (w tym IE8), możesz użyć
:nth-child()
pseudoklasy do wybrania określonych<td>
adresów z każdego wiersza. Używałbyśtd:nth-child(2) { white-space:nowrap; }
. (Działa to w tym przykładzie, ale nie działałoby, gdyby były zaangażowane jakiekolwiek rozpiętości wierszy lub zakresów współrzędnych).Jeśli musisz wspierać IE, to musisz przejść długą drogę i zastosować klasę do wszystkiego
<td>
, na co chcesz wpłynąć. To jest do bani, ale to są przerwy.Na dłuższą metę istnieją propozycje naprawienia tego braku w CSS, tak aby można było łatwiej stosować style do wszystkich komórek w kolumnie. Będziesz mógł zrobić coś takiego
td:nth-col(2) { white-space:nowrap; }
i zrobi to, co chcesz.źródło
nowrap
Atrybut wierzę, jest przestarzała. Powyższe jest preferowanym sposobem.źródło
To jest przykład użycia właściwości white space z wartością nowrap, bluetable jest klasą tabeli, poniżej tabeli są style CSS.
źródło
Umieść nierozdzielające spacje w tekście zamiast zwykłych spacji. W Ubuntu robię to za pomocą (Compose Key) -space-space.
źródło
Aby zastosować go do całej tabeli, możesz umieścić go w
table
tagu:<table style="white-space:nowrap;">
źródło