Forum PHP.pl > [CSS][JavaScript] Dwie tabele jedna pod drugą

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][JavaScript] Dwie tabele jedna pod drugą - td

kruskal

10.10.2008, 13:47:45

Cześć. Mam na stronie 2 tabele jedna pod drugą. Muszą być one osobne, ponieważ każda jest w innym formularzu.

Komórki muszą dopasowywać swoją długość do tekstu w nich zawartego. No i tu jest problem, bo tabele mają tyle samo komórek i chcę, żeby odpowiednie komórki miały tą samą długość, bo normalny wygląd jest nieestetyczny.

Da się to jakoś zapisać w CSS? Albo chociaż w javascript?

mwaloos

10.10.2008, 14:18:34

mozesz podac przyklad co chcesz uzyskac na rysunku.

dlugosc wiersza ma byc automatycznie do

<td style="width:auto; albo width:100%"></td>
jesli taka sama w obu tabelach to <td np. style="200px;"></td>

w osobnym arkuszu css rowniez sie to da tak zrobic

kruskal

10.10.2008, 15:25:00

Przykład na 2 kolumnach. Komórki dopasowywują się do długości tekstu tzn mają atrybut white-space: nowrap;

1. tabela
xxxxxxxxxxxxxxxxxxxx yyyyyyyyyyyyyyyyy
xxxxxxxxx yyyyyyyyyyyyyy
xxxxxxxxxxxxxx yyyyyyyyyy

2.tabela
xxxxxxx yy
xxx yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
xxxxxx yyyyyyyyyyy

Widać, że w 1 tabeli 1 kolumna będzie dłuższa niż 1 kolumna w 2 tabeli, bo mają różnej długości teksty wewnątrz. A ja chcę uzyskać efekt, żeby pierwsza kolumna z każdej tabeli miała taką samą długość, tzn w tym przypadku 1 kolumna w drugiej tabeli musiałaby się odpowiednio wydłużyć...

mwaloos

12.10.2008, 08:18:55

chyba oto Ci chodzi:

<style type="text/css">
td {
width:50%;
}

</style>
<body>
<table width="400" border="1">
<tr><td colspan="2">Tabela 1</td></tr>
<tr>
<td>xxxxxxxxxxxxxxxxxxxx</td>
<td>yyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>xxxxxxxxx</td>
<td>yyyyyyyyyyyyyy</td>
</tr>
<tr><td colspan="2"></td></tr>
<tr><td colspan="2">Tabela 2</td></tr>
<tr>
<td>xxxxxxx</td>
<td>yy</td>
</tr>
<tr>
<td>xxx</td>
<td>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
</table>

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.