Obramowanie tabeli

Question

Witam. Wie ktoś może jak w HTML i CSS obramować tabelę? Chodzi mi o obramowanie między wszystkimi komórkami i dookoła tabeli, ale nie w taki sposób by każda komórka miała swoją odzielną ramkę (w przypadku wpisaniu border przy definiowaniu tabeli), ale w taki sposób by między komórkami przechodziła tylko 1 linia i dzieliła je wszystkie. Z góry dziękuję i przepraszam za słabe wytłumaczenie problemu (inaczej nie potrafię :O).

Answer 1

Użyj "obramowania połączonego" tzn border collapse:

Polega to na tym, że obramowanie jest łączone w jeden border kiedy tylko jest to możliwe. border-spacing oraz empy-cells są ignorowane w tym przypadku.

table {
    border-collapse: collapse;
}

Tutaj przykład:

<style>
table{
 border-collapse:collapse;
}
td{
 border:1px solid blue;
}
</style>
<table>
<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>3</td>
  <td>4</td>
</tr>
</table>

https://jsfiddle.net/b0zuww56/

Tutaj znajdziesz więcej informacji:

http://www.w3schools.com/cssref/pr_border-collapse.asp

https://css-tricks.com/almanac/properties/b/border-collapse/

Mam nadzieję, że dobrze zrozumiałem i chodziło Tobie własnie o takie coś. Jeśli nie to daj znać będziemy myśleć dalej xD

Comments

Wielkie dzięki.

Answer 2

nie wiem czy dokladnie Cie rozumiem, ale chodzi po prostu o obrys calej tabeli?? jezeli tak to dodaj diva ktory zamyka tabele i tam tam regułę "border"

Answer 3

td {

border-left:0;
border-right:0;

}

 

Answer 4

Do obramowania służy tag border, określa się też z każdej strony np. border top right bottom left; (zamiast stron wartości w pikselach).

Answer 5

Stwórz div dla tabeli. Następnie jako atrybut div'a wykrzystaj np.:

border-top: 1px solid red;
border-right:  1px solid red; 
border-bottom: 1px solid red;
border-left: 1px solid red;

Idzie chyba nawet w ten sposób:

border: 1px 1px 1px 1px;

ALE NIE JESTEM PEWIEN (jak coś to pierwsze px określa "top" i idzie zgodnie ze wskazówkami zegara)

Answer 6

border:1px(to grubosc obramowania) solid(typ moga to byc kropki nie musi byc ciagla inia) #ff0000(kolor); dajesz to tam gdzie chcesz np

td{

border:1px solid #ff0000;

}

tr{

border:1px solid #ff0000;

}

table{

border:1px solid #ff0000;

}