CSS: ustawienie width i height <td>

0

Czasami jest tak, że programista C++ chce sobie coś napisać w js, a najwięcej czasu marnuje na ustawianiu elementów w CSS.

Jest sobie taki kod:

table.game_table {
    border-spacing: 0px;
}

td.game_field_uncovered_td {
    background-color: #c0c0c0;
    border-bottom: #7e7e7e solid 4px;
    border-right: #7e7e7e solid 4px;
    border-top: white solid 4px;
    border-left: white solid 4px;
    padding: 0px;
    margin: 0px;

    width: 16px;
    height: 16px;
}

Generuję sobie tabelkę 4x4, ale daje mi to niestety nie to co chciałem:
user image

Oczywiście chciałbym, aby były idealnie kwadratowe. Długość boku tego kwadratu to: content+padding+border+margin = 16+0+8+0. Działa dobrze dla width, ale dla height content ma 8px zamiast 16. O czym nie wiem, czego nie umiem doczytać?

1

Najprościej oraz najlepiej będzie do każdego td wsadzić diva z odpowiednimi wymiarami, o ile to możliwe w Twoim przypadku.

1

Przecie działa: https://jsfiddle.net/Lrotfzdy/
Być może nadpisałeś gdzieś niechcący w reszcie cssa domyślne zachowanie komórek tabeli.

Btw - do nazw klas / id stosuje się notację z myślnikami, zera nie powinny mieć jednostek (bo i po co), a nadawanie każdej komórce klasy psuje czytelność - po to masz kaskadowość by z niej korzystać.

1

Jeżeli to nie musi być tabela i nie ma to przechowywać wartości tabelarycznych (a z tego co widzę, to jest jakaś podstawka pod grę, a nie tabela) to NIE UŻYWAJ tabel. Oszczędzisz sobie wielu kłopotów.

1 użytkowników online, w tym zalogowanych: 0, gości: 1