CSS > Tablo last:child sorunsalı

22-06-2021, 13:40:09

selamlar, aşağıdaki koda tr,td last:child border:none eklediğim zaman çalışmıyor, yapmak istediğim şey en alttaki çizgiyi kaldırmak, neyden kaynaklanıyordur.

table, tr{width: -webkit-fill-available;border-collapse:collapse;line-height: 35px;font-size: 12px;border-bottom: 1px solid #e2e1e1!important;-moz-transition:background-color 0.2s, border-color 0.2s;}
tr:hover {background: #eeeeee;-webkit-transition:background 0.2s, background 0.2s;-o-transition:background 0.2s, background 0.2s;}

22-06-2021, 13:41:52

#2

Misafir

last-child olarak deneyin

22-06-2021, 13:42:21

#3

hankmoody

tr:last-of-type: border-bottom: none; dener misin ? veya border: 0;

22-06-2021, 13:42:27

#4

TahaKocak

Bu şekilde denediniz mi?

tr:last-child{
border:none;
}

22-06-2021, 13:43:56

#5

Oritorius

table td:last-child {
     border: 0 !important;
}

Bu şekilde deneyebilirsiniz.

22-06-2021, 13:52:26

#6

SkyGhostAir

Çizgi tr'lerde mi yoksa tr'lerin içerisindeki td'lerde mi bu önemli. Eğer tr'de ise tr:last-child {} td'lerde ise tr:last-child td {} kullanmalısın. Mantık böyle işliyor. Yani şunları dene hocam:

[COLOR=#54ACD2][FONT="Open Sans"]tr:last-child {[COLOR=#5BA1CF][FONT=consolas]border-bottom: none;[/FONT][/COLOR]}[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][/FONT][/COLOR][/FONT][/COLOR]

[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"]tr:last-child [/FONT][/FONT][/COLOR][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"]td[/FONT][/FONT][/COLOR][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"] {[COLOR=#5BA1CF][FONT=consolas]border-bottom: none;[/FONT][/COLOR] }[/FONT][/FONT][/COLOR][/FONT][/COLOR][/FONT][/COLOR]
[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][/FONT][/COLOR][/FONT][/COLOR]

Bunlar olmazsa birde zorlayarak şunları dener misin:

[COLOR=#54ACD2][FONT="Open Sans"]tr:last-child {[COLOR=#5BA1CF][FONT=consolas]border-bottom: none!important;[/FONT][/COLOR]}[/FONT][/COLOR]
[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][/FONT][/COLOR][/FONT][/COLOR]

[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"]tr:last-child [/FONT][/FONT][/COLOR][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"]td[/FONT][/FONT][/COLOR][COLOR=#54ACD2][FONT="Open Sans"][FONT="Open Sans"] {[COLOR=#5BA1CF][FONT=consolas]border-bottom: none[COLOR=#5BA1CF][FONT=consolas]!important[/FONT][/COLOR];[/FONT][/COLOR] }[/FONT][/FONT][/COLOR][/FONT][/COLOR][/FONT][/COLOR]
[COLOR=#D9DAE9][FONT="Open Sans"][COLOR=#D9DAE9][FONT="Open Sans"][/FONT][/COLOR][/FONT][/COLOR]

22-06-2021, 23:56:30

#7

hlttmz

çok ilginç ama hiç biri olmadı zaten çoğunu farklı varyasyonlarla da denemiştim

bkz: https://codepen.io/hlttmz/pen/RwpzbPg

23-06-2021, 00:07:57

#8

Haktan

hlttmz adlı üyeden alıntı: mesajı görüntüle

çok ilginç ama hiç biri olmadı zaten çoğunu farklı varyasyonlarla da denemiştim

bkz: https://codepen.io/hlttmz/pen/RwpzbPg

css'i şu şekilde dener misiniz

table, tr{width: -webkit-fill-available;border-collapse:collapse;line-height: 35px;font-size: 12px;border-bottom: 1px solid #e2e1e1!important;-moz-transition:background-color 0.2s, border-color 0.2s;}
tr:hover {background: #eeeeee;-webkit-transition:background 0.2s, background 0.2s;-o-transition:background 0.2s, background 0.2s;}

table tr:last-child {border-bottom: 0 !important;}
table{
  border-bottom: 0 !important;
}

table,tr bu iki seçiciye de border-bottom vermişsiniz. tr kalkıyor ama table'da da olduğu için anlamıyosunuz

bu arada gerekmedikçe !important kullanmayın, responsive'de zorluk çıkarır.

23-06-2021, 10:48:46

#9

hlttmz

Haktan adlı üyeden alıntı: mesajı görüntüle

css'i şu şekilde dener misiniz

table, tr{width: -webkit-fill-available;border-collapse:collapse;line-height: 35px;font-size: 12px;border-bottom: 1px solid #e2e1e1!important;-moz-transition:background-color 0.2s, border-color 0.2s;}
tr:hover {background: #eeeeee;-webkit-transition:background 0.2s, background 0.2s;-o-transition:background 0.2s, background 0.2s;}

table tr:last-child {border-bottom: 0 !important;}
table{
  border-bottom: 0 !important;
}

table,tr bu iki seçiciye de border-bottom vermişsiniz. tr kalkıyor ama table'da da olduğu için anlamıyosunuz

bu arada gerekmedikçe !important kullanmayın, responsive'de zorluk çıkarır.

hocam çok teşekkür ederim eline sağlık

)