删除表格中的元素边框

Question

我正在尝试使用下面的图例创建一个线性年历。我正在用桌子这样做，但我不知道这是否是最好的方法！

我的主要问题是使用CSS删除某些元素的表格边框。

1. 如何从 hr 的行中删除所有边框？只有一个正在运作。

2. 我需要在图例中的行之间留一个空格。

3. 我需要使用class =＆＃34; noborder＆＃34;删除元素的左，上和下边框。

＆＃13;
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 1

应用所做的任何更改，您都可以查看。

如何从具有hr的行中删除所有边框？只有一个正在运作。

.hr-sep > td{
  border: 0 !important;
}

我需要在图例中的行之间留一个空格。

<tr><td colspan="23" class="noborder"></td></tr>

我需要使用class =＆＃34; noborder＆＃34;删除元素的Left，Top和Bottom边框。

.noborder {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

＆＃13;

＆＃13;

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

.hr-sep > td{
  border: 0 !important;
}

#data tbody>tr:nth-last-child(4)>td {
  border: 0;
}

.noborder {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

＆＃13;

<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><td colspan="23" class="noborder"></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>

＆＃13;

＆＃13;

＆＃13;