A Pen by Ignacio Correia

Thumbnail
This awesome code was written by igcorreia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright igcorreia ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ignacio Correia</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container" class="h-100">
  <div class="container-fluid h-100">
    <div class="row h-100">
      <div class="col-2">
        2
      </div>
      <div class="col-10">
        <div id="tableplanning" class="d-block">
          <div class="table-responsive">
            <table class="table">
            <thead>
                                            <tr id="Meses"><th></th><th class="border center" align="center" id="Maio" colspan="31">Maio</th><th class="border center" align="center" id="Junho" colspan="30">Junho</th><th class="border center" align="center" id="Julho" colspan="31">Julho</th></tr>
                                            <tr id="Dias"><th class="center" style="width: 65px">Toldos</th><th class="border center" style="width: 65px">1</th><th class="border center" style="width: 65px">2</th><th class="border center" style="width: 65px">3</th><th class="border center" style="width: 65px">4</th><th class="border center" style="width: 65px">5</th><th class="border center" style="width: 65px">6</th><th class="border center" style="width: 65px">7</th><th class="border center" style="width: 65px">8</th><th class="border center" style="width: 65px">9</th><th class="border center" style="width: 65px">10</th><th class="border center" style="width: 65px">11</th><th class="border center" style="width: 65px">12</th><th class="border center" style="width: 65px">13</th><th class="border center" style="width: 65px">14</th><th class="border center" style="width: 65px">15</th><th class="border center" style="width: 65px">16</th><th class="border center" style="width: 65px">17</th><th class="border center" style="width: 65px">18</th><th class="border center" style="width: 65px">19</th><th class="border center" style="width: 65px">20</th><th class="border center" style="width: 65px">21</th><th class="border center" style="width: 65px">22</th><th class="border center" style="width: 65px">23</th><th class="border center" style="width: 65px">24</th><th class="border center" style="width: 65px">25</th><th class="border center" style="width: 65px">26</th><th class="border center" style="width: 65px">27</th><th class="border center" style="width: 65px">28</th><th class="border center" style="width: 65px">29</th><th class="border center" style="width: 65px">30</th><th class="border center" style="width: 65px">31</th><th class="border center" style="width: 65px">1</th><th class="border center" style="width: 65px">2</th><th class="border center" style="width: 65px">3</th><th class="border center" style="width: 65px">4</th><th class="border center" style="width: 65px">5</th><th class="border center" style="width: 65px">6</th><th class="border center" style="width: 65px">7</th><th class="border center" style="width: 65px">8</th><th class="border center" style="width: 65px">9</th><th class="border center" style="width: 65px">10</th><th class="border center" style="width: 65px">11</th><th class="border center" style="width: 65px">12</th><th class="border center" style="width: 65px">13</th><th class="border center" style="width: 65px">14</th><th class="border center" style="width: 65px">15</th><th class="border center" style="width: 65px">16</th><th class="border center" style="width: 65px">17</th><th class="border center" style="width: 65px">18</th><th class="border center" style="width: 65px">19</th><th class="border center" style="width: 65px">20</th><th class="border center" style="width: 65px">21</th><th class="border center" style="width: 65px">22</th><th class="border center" style="width: 65px">23</th><th class="border center" style="width: 65px">24</th><th class="border center" style="width: 65px">25</th><th class="border center" style="width: 65px">26</th><th class="border center" style="width: 65px">27</th><th class="border center" style="width: 65px">28</th><th class="border center" style="width: 65px">29</th><th class="border center" style="width: 65px">30</th><th class="border center" style="width: 65px">1</th><th class="border center" style="width: 65px">2</th><th class="border center" style="width: 65px">3</th><th class="border center" style="width: 65px">4</th><th class="border center" style="width: 65px">5</th><th class="border center" style="width: 65px">6</th><th class="border center" style="width: 65px">7</th><th class="border center" style="width: 65px">8</th><th class="border center" style="width: 65px">9</th><th class="border center" style="width: 65px">10</th><th class="border center" style="width: 65px">11</th><th class="border center" style="width: 65px">12</th><th class="border center" style="width: 65px">13</th><th class="border center" style="width: 65px">14</th><th class="border center" style="width: 65px">15</th><th class="border center" style="width: 65px">16</th><th class="border center" style="width: 65px">17</th><th class="border center" style="width: 65px">18</th><th class="border center" style="width: 65px">19</th><th class="border center" style="width: 65px">20</th><th class="border center" style="width: 65px">21</th><th class="border center" style="width: 65px">22</th><th class="border center" style="width: 65px">23</th><th class="border center" style="width: 65px">24</th><th class="border center" style="width: 65px">25</th><th class="border center" style="width: 65px">26</th><th class="border center" style="width: 65px">27</th><th class="border center" style="width: 65px">28</th><th class="border center" style="width: 65px">29</th><th class="border center" style="width: 65px">30</th><th class="border center" style="width: 65px">31</th></tr>
                                        </thead>
            <tbody>
              <tr class="border" id="T101">
    <td class="border"><div class="center" style="width: 60px;">T101</div></td>
    <td id="T101-1-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-2-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-3-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-4-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-5-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-6-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-7-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-8-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-9-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-10-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-11-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-12-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-13-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-14-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-15-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-16-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-17-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-18-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-19-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-20-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-21-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-22-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-23-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-24-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-25-5" class="">
        <div class="reserva-dia-topo" style="width: 65px; height:30px">
            <a href="#" onclick="buscarDetalhesReserva(9)" class="fill-div">
                <div class="dia-inteiro left center">
                </div>
                <div class="pago left">
                </div>
            </a>
        </div>
        <div class="reserva-dia-fundo" style="width: 65px;height:30px">
            <a href="#" onclick="buscarDetalhesReserva(9)" class="fill-div">
                <div class="bg-white left">
                </div>
                <div class="pago left">
                </div>
            </a>
        </div>
    </td>
    <td id="T101-26-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-27-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-28-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-29-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-30-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-31-5" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-1-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-2-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-3-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-4-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-5-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-6-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-7-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-8-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-9-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-10-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-11-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-12-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-13-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-14-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-15-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-16-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-17-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-18-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-19-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-20-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-21-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-22-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-23-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-24-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-25-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-26-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-27-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-28-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-29-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-30-6" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-1-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-2-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-3-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-4-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-5-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-6-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-7-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-8-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-9-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-10-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-11-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-12-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-13-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-14-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-15-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-16-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-17-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-18-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-19-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-20-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-21-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-22-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-23-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-24-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-25-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-26-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-27-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-28-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-29-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-30-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
    <td id="T101-31-7" class="border"><div class="bg-light" style="width: 65px; height:30px"></div><div class="bg-light" style="width: 65px;height:30px"></div></td>
</tr>
            </tbody>
            
            
          </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/igcorreia/a-pen-by-ignacio-correia-LrPxye */
body,
html {
  height: 100%;
  overflow: hidden;
}
* {
  outline: solid 1px rgba(0, 0, 0, 0.1);
}
/*#tableplanning{
  overflow: hidden;
  width: 1000px;
}*/
/*table{
  overflow-x:scroll;
}*/
/*
table { table-layout: fixed; }
td,th { width: 60px; }
*/

Comments