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

Path: news-archive.icm.edu.pl!agh.edu.pl!news.agh.edu.pl!news.cyf-kr.edu.pl!news.nask
.pl!news.nask.org.pl!news.internetia.pl!not-for-mail
From: ramblinman <%nick%@gazeta.pl>
Newsgroups: pl.comp.www
Subject: Re: stała szerokość kolumn w tabeli
Date: Tue, 13 Sep 2011 23:31:33 +0200
Organization: Netia S.A.
Lines: 68
Message-ID: <j4oi6d$o4a$1@mx1.internetia.pl>
References: <j4oe7b$avt$1@inews.gazeta.pl>
NNTP-Posting-Host: 87-205-182-206.adsl.inetia.pl
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8; format=flowed
Content-Transfer-Encoding: 8bit
X-Trace: mx1.internetia.pl 1315949581 24714 87.205.182.206 (13 Sep 2011 21:33:01 GMT)
X-Complaints-To: a...@i...pl
NNTP-Posting-Date: Tue, 13 Sep 2011 21:33:01 +0000 (UTC)
In-Reply-To: <j4oe7b$avt$1@inews.gazeta.pl>
X-Tech-Contact: u...@i...pl
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:6.0.2) Gecko/20110902 Thunderbird/6.0.2
X-Server-Info: http://www.internetia.pl/
Xref: news-archive.icm.edu.pl pl.comp.www:399466
[ ukryj 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>