stała szerokość kolumn w tabeli - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › stała szerokość kolumn w tabeli

« poprzedni wątek

następny wątek »

Ilość wypowiedzi w tym wątku: 4

1. Data: 2011-09-13 20:33:01
Temat: stała szerokość kolumn w tabeli
Od: mokpl <m...@g...pl>

Czy można jakoś nadać stałą szerokość kolumn w tabeli (przy użyciu CSS)?
Udało mi się ustawić takowe tylko dla sytuacji w których tekst
(rozumiany jako najdłuższy ciąg bez spacji) nie jest dłuższy niż
ustawiona szerokość. Inaczej to jest ignorowane.

A chciałbym, żeby sztucznie przeniosło tekst (tam gdzie się nie mieści -
nie patrząc na spacje) albo po prostu go obcięło.

Innymi słowy chciałbym, żeby stała szerokość oznaczała STAŁĄ szerokość.

Pozdr.

[ pokaż wiadomość z nagłówkami ]

do góry
2. Data: 2011-09-13 21:31:33
Temat: Re: stała szerokość kolumn w tabeli
Od: ramblinman <%nick%@gazeta.pl>

W dniu 2011-09-13 22:33, mokpl pisze:
> Innymi słowy chciałbym, żeby stała szerokość oznaczała STAŁĄ szerokość.

Niestety raczej nie obejdzie się bez dodatkowego diva w każdej komórce,
albo i dwóch, jeśli nie chcesz wpisywać każdej szerokości dwa razy.
Możesz też, jeśli nie zależy Ci na miejscu podzielenia tekstu, pociąć po
stronie serwera wszystkie długie słowa miękkimi łącznikami (soft hyphen
-  - wyszukaj w google, jeśli interesuje Cię to rozwiązanie).

Wracając do divologii, mogłoby to wyglądać tak jak poniżej. Jeśli nie
chcesz paska przewijania, zamień overflow w "td div{" na "hidden".
Zauważ też, że jeśli komórka nie ma określonej wysokości (tak jak tutaj
200px), to ewentualny pasek będzie zaraz w miejscu, gdzie kończy się tekst.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
table{
border-collapse:collapse; table-layout:fixed;
}

td{
border: 1px solid black; vertical-align: top; height:200px;
}

td div{
overflow-x:auto; width:100%; height:100%; position:relative;
}

td div div{
overflow-x:visible; width:100%; height:100%; position:absolute;
}

.c0{
width: 200px;
}

.c1{
width: 100px;
}

.c2{
width: 75px;
}

.c3{
width: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="c0"><div><div>testtesttesttesttesttesttest<br /> test
test test test test test test test </div></div></td>
<td class="c1"><div><div>testtesttesttesttesttesttest<br /> test
test test test test test test test </div></div></td>
<td class="c2"><div><div>testtesttesttesttesttesttest<br /> test
test test test test test test test </div></div></td>
<td class="c3"><div><div>testtesttesttesttesttesttest<br /> test
test test test test test test test </div></div></td>
</tr>
</table>
</body>
</html>

[ pokaż wiadomość z nagłówkami ]

do góry
3. Data: 2011-09-13 21:53:08
Temat: Re: stała szerokość kolumn w tabeli
Od: ramblinman <%nick%@gazeta.pl>

W dniu 2011-09-13 23:31, ramblinman pisze:
> Zauważ też, że jeśli komórka nie ma określonej wysokości (tak jak tutaj
> 200px), to ewentualny pasek będzie zaraz w miejscu, gdzie kończy się tekst.

Poprawka - wtedy w ogóle nie działa. Zapomniałem do czego to stosowałem.
Wysokość jest wymagana. Tutaj rozwiązanie niewymagające określania
wysokości komórki:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
table{
border-collapse:collapse; table-layout:fixed;
}

td{
border: 1px solid black; vertical-align: top;
}

td div{
overflow-x:hidden; height: 100%;
}

.c0, .c0 div{
width: 200px;
}

.c1, .c1 div{
width: 100px;
}

.c2, .c2 div{
width: 75px;
}

.c3, .c3 div{
width: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="c0"><div>testtesttesttesttesttesttest<br /> test test
test test test test test test </div></td>
<td class="c1"><div>testtesttesttesttesttesttest<br /> test test
test test test test test test </div></td>
<td class="c2"><div>testtesttesttesttesttesttest<br /> test test
test test test test test test </div></td>
<td class="c3"><div>testtesttesttesttesttesttest<br /> test test
test test test test test test </div></td>
</tr>
</table>
</body>
</html>

[ pokaż wiadomość z nagłówkami ]

do góry
4. Data: 2011-09-14 07:23:37
Temat: Re: stała szerokość kolumn w tabeli
Od: Peter May <p...@o...pl>

W dniu 13-09-2011 22:33, mokpl pisze:
> Czy można jakoś nadać stałą szerokość kolumn w tabeli (przy użyciu CSS)?

table-layout:fixed;

Ja korzystam jeszcze z połączeniem z border-collapse i border-spacing:

border-collapse:separate;
border-spacing:0;
table-layout:fixed;

--
Peter

[ pokaż wiadomość z nagłówkami ]

do góry