HTML-CSS таблицы устранить неполадки

У меня есть этот HTML кодHTML-CSS таблицы устранить неполадки

<table> 
<tr> 
<th></th> 
<th>SUN</th> 
<th>MON</th> 
<th>TUE</th> 
<th>WED</th> 
<th>THU</th> 
<th>FRI</th> 
<th>SAT</th> 
</tr> 
<tr> 
<td>Morning<br>7AM-12PM</td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
</tr> 
<tr> 
<td>Afternoon<br>12PM-5PM</td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
</tr> 
<tr> 
<td>Evening<br>5PM-9PM</td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
<td><input id="radio1" type="radio" name="radio" value="1" checked="checked"><label for="radio1"><span><span></span></span></label></td> 
</tr> 
</table>

И КСС

table, tr, th, td 
{ 
//border: 1px solid black; 
padding: 5px; 
} 
table 
{ 
border-spacing: 15px; 
} 
td .dar, .dark 
{ 
background-color: #888; 
} 
input[type=radio ]:not(old){ 
    width  : 2em; 
    margin : 0; 
    padding : 0; 
    font-size : 1em; 
    opacity : 0; 
} 

input[type=radio ]:not(old) + label{ 
    display  : inline-block; 
    margin-left : -2em; 
    line-height : 1.5em; 
} 

input[type=radio ]:not(old) + label > span{ 
    display   : inline-block; 
    width   : 1.2em; 
    height   : 1.2em; 
    margin   : 0.25em 0.5em 0.25em 0.25em; 
    border   : 0.0625em solid rgb(192,192,192); 
    border-radius : 0.70em; 
    background  : rgb(224,224,224); 
    background-image : -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :  -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :  -o-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    background-image :   linear-gradient(rgb(240,240,240),rgb(224,224,224)); 
    vertical-align : bottom; 
} 

input[type=radio ]:not(old):checked + label > span{ 
    background-image : -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :  -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :  -o-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
    background-image :   linear-gradient(rgb(224,224,224),rgb(240,240,240)); 
} 


input[type=radio]:not(old):checked + label > span > span{ 
    display   : block; 
    width   : .82em; 
    height   : .82em; 
    margin   : 0.125em; 
    border   : 0.0625em solid rgb(115,153,77); 
    border-radius : 0.70em; 
    background  : rgb(153,204,102); 
    background-image : -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :  -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :  -o-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
    background-image :   linear-gradient(rgb(179,217,140),rgb(153,204,102)); 
}

Я не в состоянии сделать 2 вещи:

Установите все переключатели внутри рамки, которая имеет границу, которая отличает их от «Дней» выше и «Время» слева.
Установить цвет фона в серый для всего разделения, которое появляется ниже «SUN» и «САТ»

Спасибо заранее. Я очень ценю вашу помощь.

источник

2015-04-02 Aditya Singh

кажется, как его общий стиль таблицы, так что я очищен и аннотированный мой код немного в случае помогает другим в будущем.

CSS добавлена

table { 
    border-collapse: collapse; 
} 

td { 
    border-style: solid; 
    border-color: black; 
    border-width: 0; 
} 

tr td:nth-child(2), tr td:nth-child(8) { 
    background-color: grey; 
} 

tr:nth-child(2) td:nth-child(n+2) { border-width: 1px 0px 0px 0px; } 

tr:nth-child(4) td:nth-child(n+2) { border-width: 0px 0px 1px 0px; } 

tr:nth-child(2) td:nth-child(2) { border-width: 1px 0px 0px 1px; } 

tr:nth-child(3) td:nth-child(2) { border-width: 0px 0px 0px 1px; } 

tr:nth-child(4) td:nth-child(2) { border-width: 0px 0px 1px 1px; } 

tr:nth-child(2) td:nth-child(8) { border-width: 1px 1px 0px 0px; } 

tr:nth-child(3) td:nth-child(8) { border-width: 0px 1px 0px 0px; } 

tr:nth-child(4) td:nth-child(8) { border-width: 0px 1px 1px 0px; }

HTML неизмененные

аннотации в скрипке ..

https://jsfiddle.net/Hastig/uw1d4cLr/2/

альтернативные дни-а-строки FIDDLE

https://jsfiddle.net/Hastig/3hjqcamv/2/

источник

2015-04-02 22:10:21

Is есть способ внести в это же изменения? Я бы очень признателен за вашу помощь. –

http://jsfiddle.net/adityasingh773/3hjqcamv/ –

Те же изменения, что и предыдущие в «SUN» и «SAT» –

Для границ:

table tr td:first-child { border:1px solid black; border-width:0px 1px 0px 0px; } 
th:not(:first-child) { border:1px solid black; border-width:0px 0px 1px 0px; }

Для серого Б.Г. цвета

table tr td:nth-child(2), table tr td:nth-child(8) { background-color:grey; }

FIDDLE

источник

2015-04-02 21:51:17

Спасибо, человек! Это работало очень хорошо для меня! –

Приветствую вас, товарищ –

выглядит так, будто я был слишком медленным: D вот еще одна скрипка (нужно много очистки/упрощения). Https://jsfiddle.net/Hastig/uw1d4cLr/ –

HTML-CSS таблицы устранить неполадки

ответ

Смежные вопросы