Question

我有这个HTML代码

<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>

而css是

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));
}

我无法做两件事：

将所有单选按钮设置在一个框内，框中的边框区别于＆＃34; Days＆＃34;以上和＆＃34;时间＆＃34;从左边开始。
将下面显示的整个分区的背景颜色设置为灰色＆＃34; SUN＆＃34;和＆＃34; SAT＆＃34;

提前谢谢你。我非常感谢你的帮助。

Answer 1

对于边界：

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; }

灰色bg颜色

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

FIDDLE

Answer 2

看起来像是一种常见的表格样式，所以我清理并注释了我的代码，以防将来帮助其他人。

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/

替代天 - 行 - 小提琴

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

HTML-CSS表故障排除

2 个答案: