Zaokrąglenie tabel, jak uzyskać najlepszy efekt? Opcje

[WebCM]

Standardowo stworzona tabela:

[HTML] pobierz, plaintext 
<table cellspacing="1" cellpadding="5">
  <caption>Nagłówek całej tabeli</caption>
  <tr>
    <th>Nagłówek 1</th><th>Nagłówek 2</th>
  </tr>
  <tr>
    <td>Coś tam</td><td>Coś tam</td>
  </tr>
  <tr>
    <td colspan="2"><input value="Zapisz" /></td>
  </tr>
</table>
[HTML] pobierz, plaintext 

Style

[CSS] pobierz, plaintext 
table {
  background-color: kolor_obramowania;
  width: 100%;
  margin-bottom: 10px
}
 
td {
  background-color: kolor_tla_komorek;
  padding: 5px
}
[CSS] pobierz, plaintext 

Taki układ jest stosowany prawie wszędzie. Tego nie da się uzyskać wyłącznie za pomocą atrybutu border.

Jak dodać obramowanie od góry i od dołu? Wygląda na to, że nie da się.

Próba 1. Dodać border-radius do table

Aby eksperyment powiódł się, tabela musi mieć obramowanie border: 1px solid kolor; ale go nie ma. Dlaczego? Byłaby podwójnie obramowana! Przez border: i background-color!

Próba 2. Ujemne marginesy dla nagłówka i ostatniego wiersza - nie działa

Czy coś pominąłem? Zatem jak zaokrąglić tabelę?

Można inaczej stworzyć tabelę, co nawet będzie bardziej logiczne, czyli border-spacing i border. Coś mi nie wychodzi. Kiedy dodam border-spacing: 1px; border: 1px solid #kolor i border-radius, tabela jest zaokrąglona, ale kolor obramowania wewnątrz jest biały. Jeżeli dodam atrybut border, źle to wygląda.

[Blame]

Ale że co? Nie rozumiem w ogóle co chcesz osiągnąć, dodam tylko, że lekarstwem na podwójne obramowanie jest border-collapse.

[krzysztof_kf]

A sobie strzelę

[CSS] pobierz, plaintext 
 
border-top: ;
border-bottom: ;
[CSS] pobierz, plaintext 

[WebCM]

krzysztof_kf: co ma to zmienić? A co z bokami? Bez wyłączenia background-color dla <table> kiepsko to wygląda

Wyjaśnię, co chcę otrzymać.

Rogi tabeli mają być zaokrąglone. W powyższym przykładzie nagłówek realizuje tag <h1>, ale czasami jest potrzeba użycia <caption>. Na dole przy zaokrągleniach brakuje kawałka obramowania (błąd!). Odpowiedź prosta - sam tag <table> nie ma właściwości border:

Jak zatem zaokrąglić tabelę bez zepsucia jej wyglądu?

Znam własność border-collapse, ale jak ustawić wewnętrzne obramowanie w CSS?

Ten post edytował WebCM 30.08.2010, 19:57:01

[macromatic]

a nie lepiej to zrobić za pomocą obrazków zamiast CSS'a?
obrazki będą wyświetlać się wszędzie, natomiast border nie działa z tego co kojarzę na IE

[lDoran]

a nie lepiej to zrobić za pomocą obrazków zamiast CSS'a?
obrazki będą wyświetlać się wszędzie, natomiast border nie działa z tego co kojarzę na IE

tak pod IE jest tragedia, ale jeżeli czegoś szukasz i chcesz to w CSS'ie zrobić to tu masz link: http://perfectionorvanity.com/border-radius.html

[erix]

tak pod IE jest tragedia

A dasz sobie rękę uciąć?

http://snook.ca/archives/html_and_css/roun..._experiment_ie/

[WebCM]

Zrobiłem to inaczej. Pozostała jeszcze kwestia obramowania wewnętrznego tabeli dla innych przeglądarek niż FF.

[CSS] pobierz, plaintext 
/* Top round */
h1, .menuHeader, .tabela caption
{
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-khtml-border-radius: 5px 5px 0 0
}
 
/* Bottom round */
.contentBox, .menuBox, .tabela
{
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-khtml-border-radius: 0 0 5px 5px
}
 
/* Both round - nie mam pomysłu na nazwę uniwersalnej klasy */
.info, .error, .warning {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px
}
.tabela {
  width: 100%;
  border: 1px solid #BFBFBF; /* obramowanie ZEWNĘTRZNE */
  border-spacing: 1px; /* odstęp między komórkami wynosi 1px */
}
.tabela tbody {
  background-color: #EAEAEA; /* kolor obramowania w Firefoksie */
  overflow: hidden; /* hak dla Firefoksa rozciągający tło na obramowanie */
}
.tabela td {
  padding: 5px; /* margines wewnętrzny KAŻDEJ komórki */
  background-color: #FFF; /* biały kolor tła komórek - NAJWAŻNIEJSZA CZĘŚĆ */
}
.tabela tr:nth-child(even) td {
  background-color: #F8F8F8 /* parzyste wiersze w innym kolorze - WAŻNA CZĘŚĆ */
}
[CSS] pobierz, plaintext 

Obramowanie pojawi się tylko w Firefoksie. Szukam lepszego rozwiązania.

Ten post edytował WebCM 22.09.2010, 15:33:02