Проблема с тази задача за всички, които бяхме да решаваме тази задача след лекцията, беше със закръгляването на border - a. Изглежда, че проблема се решава с overflow: hidden;
Това е link към кратко клипче, което показва как без overflow не става, колкото и да го пробвахме.
Става и без overflow, ама е много занимавка.
1) Трябва да се закръгли бордъра на таблицата.
2) Да се селектират първия и последния ред и да се закръглят съответно горните ъгли на първия и долните ъгли на последния.
3) Да се закръглят поотделно нужните ъгли на 4-те ъглови клетки.
Това би трябвало да сработи; може и да пропускам нещо, но съм сигурен, че успях да го преборя преди време. Като гледам, махнал съм бордърите на външните клетки, та може отделното им закръгляне да не бачка съвсем...
Ето "красивия" CSS, който съм измъдрил тогава: ЦЪК.
Аз го направих с отделно закръгляне на крайните клеткии се получи. :) Ето по този начин:
.round{
border-top-left-radius: 7px;
}
.trround{
border-top-right-radius: 7px;
}
.blround{
border-bottom-left-radius: 7px;
}
.brround{
border-bottom-right-radius: 7px;
}
И аз го направих по подобен начин, но с id-та, мисля че няма нужда от класове и отделно трябва да се сложи border-radius на цялата таблица :)
Относно стърчащите ръбчета на клетките извън заоблените ръбове на таблицата с overflow: hidden работи, НО не и в IE11. Там трябва да се заоблят съответните долен ляв и долен десен на first и last child oт клетките на последния ред и first i last child на клетките на thead- ред-а съответно горен ляв и горен десен.
Border-radiusa забелязах, че ако е същия размер като на таблицата се получава разлика и не е добре. За това съм сложил border-radius на таблицата 15px, а на ръбчетата на клетките 13px и се получи идеално.
Аз мисля затова махнах бордъра на някои от клетките, припокриваха се грозно.
Да в смисъл да няма натрупване на два бордера един до друг.
Не е точно по темата, но е относно същата задача: бутоните за резултата какви трябва да са точно (не е обяснено в заданието) - само някакви текст клетки ли да са, dropdown list ли някакъв или нещо друго?
edit: оправих се, не се бях сетил за select box
Аз успях да го направя и без overflow - с first, last child :)
Аз имам едно питане относно задачката... трябва ли бутончетата да извършват някакви действия? Или просто да си стоят там без функционалност?
Може просто да ги сложиш бутончетата, да могат да се кликат (за тези червените е по-добре да ги сложиш disabled). Ако имаш желание може да вкараш малко JavaScript да се върши някакво действие, например да се вади съобщение с един alert().
супер, а dropdown-четата и те така ли??
Ами аз на тях сложих числа от 0 до 7 ако не се лъжа, като и те бяха disabled ако мачът е минал. Но за това домашно не би трябвало да има значение.
Пробвайте с {border-radius: 1em}.
Има ли някой, който да е направил този проблем без таблици, т.е. със css стил? :)