Jak zapobiec łamaniu wiersza w kolumnie komórki tabeli (a nie pojedynczej komórce)?

170

Jak mogę zapobiec automatycznym podziałom wierszy w kolumnie tabeli (a nie w jednej komórce)?

html css layout

— Steven
źródło

1

Wybierz odpowiedź! ... chyba za późno

— Jaeeun Lee

258

Możesz użyć spacji w stylu CSS:

white-space: nowrap;

— David M.
źródło

4

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.

— estani
źródło

19

Użyj stylu nowrap:

<td style="white-space:nowrap;">...</td>

To CSS!

— Derek Illchuk
źródło

Chcę zapobiec łamaniu linii we wszystkich komórkach tej samej kolumny.

— Steven

17

Poprostu dodaj

style="white-space:nowrap;"

Przykład:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

— Harun lub Rashid
źródło

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.

— Xanthir
źródło

13

<td style="white-space: nowrap">

nowrapAtrybut wierzę, jest przestarzała. Powyższe jest preferowanym sposobem.

— Dan Breen
źródło

6

<table class="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: 3px 2px;
        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.

— Matovu Ronald
źródło

5

Umieść nierozdzielające spacje w tekście zamiast zwykłych spacji. W Ubuntu robię to za pomocą (Compose Key) -space-space.

— Roger Keays
źródło

5

Aby zastosować go do całej tabeli, możesz umieścić go w tabletagu:

<table style="white-space:nowrap;">

— OlgaMaciaszek
źródło