0

I am trying to create a linear annual calendar with a legend below. I am doing this with table but I don't know if this the best method!

My major problem is to remove the table borders of some elements using CSS.

  1. How can I remove the all borders from the rows that have hr ? Only one is working.

  2. I need to have a short space between the rows in the legend.

  3. I need to remove the Left, Top and Bottom borders of the elements with 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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Elio Fernandes
  • 1,335
  • 2
  • 14
  • 29
  • I wouldn't be using additional markup (rules) for styling. Use borders and/or pseudo-elements. Otherwise, add a class to the rows that contain rules using the same logic. It would be helpful to see a diagram of the intended result rather than asking several specific questions without context. You may end up with a better solution. – isherwood Sep 29 '17 at 17:02
  • Actually, by doing it the way you are you break the semantic intent of tables and reduce accessibility. You shouldn't have rows that serve no purpose other than styling. – isherwood Sep 29 '17 at 17:05
  • See https://stackoverflow.com/questions/9258754/spacing-between-thead-and-tbody. – isherwood Sep 29 '17 at 17:11

1 Answers1

0

Applied whatever changes were made, can you check.

How can I remove the all borders from the rows that have hr ? Only one is working.

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

I need to have a short space between the rows in the legend.

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

I need to remove the Left, Top and Bottom borders of the elements with class="noborder".

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


#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;
}
<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>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Naren, if I remove the in the legend, is there a way to make the space between the rows in the legend be smaller? – Elio Fernandes Sep 29 '17 at 19:42
  • @ElioFernandes This is the recommended method I guess, Here is another way of doing it [table spacing](http://jsfiddle.net/wYCNg/) finally, another option is to create a new table with border-spacing property set, refer [here](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing), But I guess adding a new row will be the simplest and best approach. – Naren Murali Sep 30 '17 at 01:04