【发布时间】：2023-03-06 16:22:01
【问题描述】：
我正在尝试创建一个带有下面图例的线性年历。我正在用桌子做这个，但我不知道这是否是最好的方法！
我的主要问题是使用 CSS 删除某些元素的表格边框。
如何从具有 hr 的行中删除 所有边框？只有一个在工作。
我需要在图例中的行之间留一个短间距。
我需要移除 class="noborder" 元素的左、上、下边框。
#data {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
width: 1.5rem;
height: 1rem;
padding-left: 1px;
}
#data tr td {
border: 1px solid black;
}
<!-- remove borders from td with hr -->#data tbody>tr:nth-child(1)>td {
border: 0;
}
#data tbody>tr:nth-last-child(3)>td {
border: 0;
}
<!-- no borders -->.noborder {
border-top: 0;
border-bottom: 0;
border-left: 0;
}<table id="data">
<thead>
<tr>
<th>Month</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
</thead>
<tbody>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Month data -->
<tr>
<td>January</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>February</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>March</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<!-- Seperator -->
<tr class="hr-sep">
<td colspan="23">
<hr/>
</td>
</tr>
<!-- Legend -->
<tr class="legend">
<td class="noborder"></td>
<td>L1</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td colspan="3"></td>
<td>L3</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
<tr class="legend">
<td class="noborder"></td>
<td>L2</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
<td>L4</td>
<td colspan="5"></td>
<td colspan="2"></td>
<td class="noborder" colspan="3"></td>
</tr>
</tbody>
</table>【问题讨论】：
-
我不会为样式使用额外的标记（规则）。使用边框和/或伪元素。否则，向包含使用相同逻辑的规则的行添加一个类。查看预期结果的图表而不是在没有上下文的情况下提出几个具体问题会很有帮助。您最终可能会得到更好的解决方案。
-
实际上，按照自己的方式进行操作会破坏表格的语义意图并降低可访问性。你不应该有除了样式之外没有其他用途的行。