Софтуерно Инженерство
Loading...
+ Нов въпрос
DiyanTonchev92 avatar DiyanTonchev92 233 Точки

Увеличи border-radius-а на най-горната лява клетка - border-top-left-radius и на най-горнaта дясна клетка - border-top-right-radius.
Същото направи и с долните ъгли (клетки) на таблицата - border-bottom-left-radius, border-bottom-right-radius.

0
10/12/2015 11:27:25
dayanna1807 avatar dayanna1807 0 Точки

Работата е там, че колкото и да бъде border-radius, то го прави, но не изрязва ъглите на таблицата и седи грозно. Отгоре също го е направило, просто е под заглавния ред и много не се вижда на снимката.

0
DiyanTonchev92 avatar DiyanTonchev92 233 Точки

Не на самата таблица, на таблицата са ти увеличени, а на съответните клетки (горни и долни). Виж моето решение -> World Cup Brasil

Ето и как изглежда -> цък

P.S. Най-добре дай код, за да видим smiley

1
10/12/2015 11:43:40
dayanna1807 avatar dayanna1807 0 Точки

Да, видях от кода, който прати, какво имаш предвид. След като се направи radius и на последните клетки се потъмнява бордера, но пак не се изрязва ъгълчето дори в твоето решение. Това ли е всичко, което може да се направи?


body{
	background-color: green;
	font-family: "Arial", Arial, sans-serif;
    font-size: 20px;

}

#wrapper {
     width: 960px;
     margin: 0px auto;
     padding: 20px;
	 background-color: green;

 }

.world-cup, .table-header-group, td{
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

.world-cup{
	border-radius: 15px;
}

.table-header-group{
	font-family: "Arial Rounded MT Bold";
	font-size: 22px;
	background-color: yellow;
}

.country{
	text-align: right;
}

.result, .group, .bet{
	text-align: center;
}

.country2{
	text-align: left;
}

th:first-child {
  border-top-left-radius: 15px;
}

th:last-child {
  border-top-right-radius: 15px;
}

tr:last-child > td:first-child {
  border-bottom-left-radius: 15px;
}

tr:last-child > td:last-child {
  border-bottom-right-radius: 15px;
}

tr:nth-child(2n){
	background-color: white;
}

tr:nth-child(2n+1){
	background-color: grey;
}

button{
	width:35px;
    height:35px;
    color: white;
	text-align: center;
    border-radius: 100%;
	background-color: red;
	
}

.red{
	color: red;
}

 

0
10/12/2015 12:06:53
Filkolev avatar Filkolev 4428 Точки

Тук нещата доста зависят от браузъра. Потърси стари теми за това домашно, там също доста се обсъждаше този проблем. В общи линии май се налагаше да се слага ръчно border-radius на таблицата, на първия и последния ред, както и на ъгловите клетки.

Може да идиш ТУК. Пробвах с различни браузъри и е ОК. Виждам, че съм махал и някакви бордъри, мисля, че изглеждаха удебелени защото не ползвам border-collapse.

4
10/12/2015 12:03:36
exploitx avatar exploitx 71 Точки

Имах абсолютно същия проблем. И проблема беше, че оцветявах tr, а не td  на последния ред. Дефакто трябваше на всяка клетка да задам бекграунд колър, а не на всеки ред.

При мен с това се оправи.

1
10/12/2015 12:47:29
lazarov.pl avatar lazarov.pl 27 Точки

Ти сам казваш какъв е проблема - > бутоните. Използвай <button> в последното <td> и приложи стиловете на него, а не на самата клетка.  Например .bet button {...}. 

1
13/12/2015 11:15:40
antonp1p2 avatar antonp1p2 17 Точки

Да верно изобщо не са сетих за тага <button>. Мерси :)

0