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

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

Data: 2011-09-13 21:31:33
Temat: Re: stała szerokość kolumn w tabeli
Od: ramblinman <%nick%@gazeta.pl> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
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>