Forum PHP.pl > [HTML][CSS]Tabelka łączenie wierszy

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Tabelka łączenie wierszy

xamrex

4.01.2011, 21:58:20

Witam,
Mam taki kod:

Kod

<html>
<style type="text/css">
#rounded-corner
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 11px;
    text-align: left;

}
#rounded-corner thead th.rounded-q0
{

    background: #b9c9fe url('http://www.mini-gry.net/aqq/lewy.png') left -1px no-repeat;

}
#rounded-corner thead th.rounded-q4
{
    background: #b9c9fe url('http://www.mini-gry.net/aqq/prawy.png') right -1px no-repeat;
}
#rounded-corner thead th.rounded-q1
{
    background: #b9c9fe url('http://www.mini-gry.net/themes/blueaqua/style/images/111.gif')
}

#rounded-corner th
{
    padding: 3px;
    font-weight: normal;
    font-size: 11px;
    color: #039;
background: #b9c9fe url('http://www.mini-gry.net/themes/blueaqua/style/images/111.gif')
}
</style>

<table width="100%" border="0" cellspacing="4" cellpadding="5" id="rounded-corner">
<thead><tr>
<th align="center" scope="col" class="rounded-q0"></th>
<th width="38%" align="center" scope="col" class="rounded-q1"><b>10 Graczy</b></th>
<th width="38%" align="center" scope="col" class="rounded-q1"><b>Losowa gra</b></th>
<th width="20%" align="center" scope="col" class="rounded-q1"><b>Nowe gry</b></th>
<th align="center" scope="col" class="rounded-q4"></th>
</tr></thead></table>
</html>

I tabela wygląda tak:

Można zobaczyć tutaj:
www.mini-gry.net/wyglad.htm

W jaki sposób zrobić aby połączyć rogi tabelki?

tehaha

4.01.2011, 23:48:34

nie wiem, czy dobrze zrozumiałem, ale jeżeli chodzi Ci o białe odstępy to daj: cellspacing="0"

sadistic_son

5.01.2011, 00:09:37

Co znaczy "połączyć rogi tabelki" ? Pozbyć się tych białych odstępów? Jeśli tak to wywal to padding:3px; ze stylu dla #rounded-corner th.

xamrex

5.01.2011, 10:13:37

Chciałbym po prostu aby to wyglądało tak:

Czyli żeby pierwszy i ostatni wiersz nie miał tych białych odstępów, a reszta wierszy ma mieć te białe odstępy

bigbadcompany

5.01.2011, 12:24:52

Wydaje mi się, że w tr masz wstawiony obrazek który się powiela na całą szerokość. Wstaw sobie w lewą i prawą komórkę img z tymi zagięciami potem wypozycjonuj je za pomocą align="left" align="right".

<p align="left"><img src="lewy.png"></img></p>
<p align="right"><img src="prawy.png"></img></p>

Możesz poszukać jeszcze o zaokrąglaniu krawędzi tabel w css. Niestety starsze wersje IE mają problem z poprawnym wyświetleniem takich rozwiązań.

xamrex

5.01.2011, 13:49:47

bigbadcompany
Jeśli zastosuje coś takiego to mój lewy lub prawy róg nie może być przeźroczysty (gdyż pod sobą będzie miał tą zwykłą belkę (http://www.mini-gry.net/themes/blueaqua/style/images/111.gif) i nie będzie widać zaokrąglenia

bigbadcompany

5.01.2011, 15:11:49

Cytat(xamrex @ 5.01.2011, 13:49:47 )

I tu powstaje problem czy koniecznie chcesz by to były png albo gify bez tła ? Bo jeśli tak to zawsze będziesz miał te niewidoczne zagięcia z racji zlewających się grafik. Możesz spróbować powalczyć z css'em

http://itporady.pl/html-css/zaokraglanie-r...-uzycia-grafik/

Nie sądzę, żeby rozwiązało to twój problem ale zawsze jest to jakieś wyjście

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.