Here is a calendar that is laid out using flex:
https://jsfiddle.net/elmonty/mafhksjp/8/
Notice how each month has a thicker line on the left side below the heading rows. How can I get rid of this line?
Here is the complete HTML & CSS code:
#calendars-container {
text-align: center;
font-family: Roboto;
font-size: 9pt;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
table.calendar {
outline: 1px solid #555;
border-collapse: collapse;
margin: 0;
}
table.calendar thead {
background-color: #e6eaef;
}
table.calendar th {
font-weight: normal;
line-height: 1.5;
}
table.calendar th.month {
background-color: #d9d9d9;
line-height: 1.75;
}
table.calendar td {
padding: 2px 4px;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<html>
<body>
<div id="calendars-container">
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">June 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">July 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6"> </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td colspan="5"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">August 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">September 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">October 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td colspan="4"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">November 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">December 2023</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td colspan="6"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">January 2024</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td colspan="3"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">February 2024</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">March 2024</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5"> </td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td colspan="6"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">April 2024</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td colspan="4"> </td>
</tr>
</tbody>
</table>
<table class="calendar">
<thead>
<tr>
<th class="month" colspan="7">May 2024</th>
</tr>
<tr>
<th abbr="S">S</th>
<th abbr="M">M</th>
<th abbr="T">T</th>
<th abbr="W">W</th>
<th abbr="T">T</th>
<th abbr="F">F</th>
<th abbr="S">S</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
3
Answers
Matt is right about the cause but not the solution. The solution is to add a 1px margin on the right and bottom of each calendar table.
table.calendar {margin: 0 1px 1px 0;}You’ve got 1px borders butting up against each other. This is causing a 2px border. A little trick that’ll work is to remove the
outline, add a 1pxgapon#calendars-containerand usebox-shadowto represent your borders. Because box-shadow is virtually drawn in and not a part of the box model they can overlap:https://jsfiddle.net/hv8s5wd1/
As an option, you can replace the
outlinewith aborder, and set a negativemarginto.calendar: