Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

table-cell w td nie reaguje na width:100%

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

table-cell w td nie reaguje na width:100%

Post 07.12.2016, 21:57:26

Witam serdecznie, to mój pierwszy post więc przede wszystkim chciałbym powitać szanownych forumowiczów...
ale nie marnując Waszego cennego czasu, mam spory problem, mam mnóstwo stron ze strukturą w stylu

Kod: Zaznacz cały
<table class=kafle>
  <tr>
    <td><a href=></a></td>
  </tr>
</table>


i nie chciałbym tej struktury zmieniać, natomiast muszę zrobić "<a>" aktywny na całej objętości komórki. ustawiłem więc <a> jako table-cell i szerokość na 100%, problem w tym, że wartość procentowa nie jest brana pod uwagę, jak to ustrojstwo obejść, dodam że zawartość <a> ma być wyśrodkowana w pionie i poziomie oraz zapełniać całą zawartość komórki (swojego rodzica), będę wdzięczy za pomoc
facet_
Posty: 4
Dołączył(a): 07.12.2016

Re: table-cell w td nie reaguje na width:100%

Post 07.12.2016, 23:12:21

ok sam sobie odpowiem, może nie jest to eleganckie rozwiązanie ale działa, ustawiam width dziecka nie na 100% a na jakąś dużą szerokość np 10000px.
facet_
Posty: 4
Dołączył(a): 07.12.2016

Re: table-cell w td nie reaguje na width:100%

Post 08.12.2016, 16:58:12

Ustaw dla <a>: display: block; width:100%; height: 100%; a dla <td>: text-align: center; vertical-align: middle
http://www.tworcastron.pl - blog o grafice, projektowaniu stron i web developerce
breco
Posty: 113
Dołączył(a): 17.09.2016

Re: table-cell w td nie reaguje na width:100%

Post 09.12.2016, 09:41:22

@breco: jak to byłoby takie proste to bym tu nie pytał, wartości procentowych nie widzi w tym cały problem, dla potomnych ja mam tak i działa wszystko jak chcę:
Kod: Zaznacz cały
.kafle {
    table-layout: fixed !important;
    width: 100%;
    margin: 0 auto;
}
.kafle td:nth-child(even), .kafle td:nth-child(odd) {
    font-size: 30px !important;
    width: 33% !important;
    padding: 0;
    vertical-align: middle !important;
    text-align: center !important;
    border-width: 20px 25px;
    border-style: solid;
}
.kafle6 td:nth-child(even), .kafle6 td:nth-child(odd) {
    border-width: 10px;
}
.kafle td:nth-child(odd) a, .kafle td:nth-child(even) a {
    width: 10000px !important; !!!!!!!!!!!!!! to jest naistotniejsze, bez tego nie rozciąga na pełną szerokość rodzica !!!!!!!!!!!
    height: 130px !important;
    vertical-align: middle !important;
    text-align: center !important;
    padding: 10px !important;
    display: table-cell !important;
    line-height: 32px;
}
facet_
Posty: 4
Dołączył(a): 07.12.2016

Re: table-cell w td nie reaguje na width:100%

Post 09.12.2016, 12:07:22

może nie do końca zrozumiałem pytanie, ale nie o to chodzi? https://fiddle.jshell.net/dr4sbfr2/2/
http://www.tworcastron.pl - blog o grafice, projektowaniu stron i web developerce
breco
Posty: 113
Dołączył(a): 17.09.2016

Re: table-cell w td nie reaguje na width:100%

Post 13.12.2016, 11:19:56

dokładnie o to chodziło, dziękuję (słowo klucz: flex)
facet_
Posty: 4
Dołączył(a): 07.12.2016


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

iCash

Subskrypcja

Mamy 49151 zarejestrowanych użytkowników.
Najnowszy użytkownik: alan41


Nasi użytkownicy napisali:

  • 932644 wiadomości
  • w 245494 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)