Home > Blockchain >  Accordion button not wide despite width set to 100%?
Accordion button not wide despite width set to 100%?

Time：12-14

I have a webpage with some accordion buttons in it, I set the widh of the buttons to 100% but they aren't covering the whole page. Could anyone point out what's wrong and how to fix it?

var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i  ) {
          coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight   "px";
            }
          });
        }
html {
  background-color: #daeff5;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  overflow-x: hidden;
  height: 100vh;
  position: relative;
}

header {
  background-color: #dc006a;
  padding: 5px;
  text-align: center;
  font-size: 15px;
  color: #00365e;
}

section {
  display: -webkit-flex;
  display: flex;
}

#content {
  min-height: calc(100vh - 140px);
}
#footer {
  height: 60px;
}

aside {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #00365e;
  padding: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 190px;
  background-color: #dc006a;
}

li a {
  display: block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  color: #00365e;
  font-size: 20px;
}

li a:hover {
  background-color: #7a003b;
  color: white;
}
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #daeff5;
  padding: 10px;
  text-align: center;
}

.footer {
  position: absolute;
  width: 100%;

  background-color: #dc006a;
  text-align: right;
}
.footer_text {
  padding-right: 20px;
  text-align: center;
  color: #00365e;
  font-size: 16px;
}

@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

table,
th,
td {
  border: 1px solid black;
  text-align: center;
}

p {
  text-align: center;
}

.navbar {
  width: 100%;
  background-color: #00365e;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #7a003b;
}

.active {
  background-color: #dc006a;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 20%;
  margin-bottom: 16px;
  padding: 2.5%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
}

.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
}

.container {
  padding: 0 16px;
}

.container::after,
.row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 200px;
}

.button:hover {
  background-color: #555;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.collapsible {
      background-color: #dc006a;
      color: #00365e;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 20px;
    }

    .active,
    .collapsible:hover {
      background-color: #7a003b;
    }

    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #DAEFF5;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="stylesheet.css">
  <title>Gilde Dev-ops Solutions</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div >
    <header>
      <h1>Taken</h1>
    </header>
    <div >
      <a href="index.html"> Home</a>
      <a href="taken.html"> Taken</a>
      <a href="smoelenboek.html"> Smoelenboek</a>
      <a href="contact.html"> Contact</a>
      <a href="ideeenbox.html">Ideeënbox</a>
      <a href="projecten.html">Projecten</a>
    </div>
  </div>
  <section>

    <div id="content">

      <article>


        <button >Periode 1</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>Filmen</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Editen</td>
              <td>15</td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Voiceover</td>
              <td>1.5</td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Logo</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Script</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Css coderen</td>
              <td>25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Main pagina</td>
              <td>20</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Smoelenboek Pagina</td>
              <td>25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Taken pagina</td>
              <td>3</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Contact pagina</td>
              <td>15</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>projecten pagina</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Foutjes bijwerken</td>
              <td>5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Onderzoek arduino</td>
              <td>2.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Idee ergotimer uitwerken</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Arduino programeren</td>
              <td>10</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Fouten oplossen simulatie</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Arduino Uitwerken</td>
              <td>1.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc assembleren trainingen</td>
              <td>3</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc onderdelen noteren</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc assembleren</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc opstarten</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Software instaleren</td>
              <td>0,5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Huiswerk</td>
              <td>10</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>
            <tr>
              <td>totaal</td>
              <td>145,25</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>

        <button >Periode 2</button>
        <div >
          Content
        </div>

        <button >Periode 3</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>







          </table>
        </div>

        <button >Periode 4</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>







          </table>
        </div>


      </article>
  </section>
  </div>

  <div id="footer">
    <section>
      <div >
        <p >
          Gilde Dev-Ops Solution 2021 ©
          <br />
          [email protected]
          <br />
           31884682000
          <br />
          Bredeweg 235, 6042GE Roermond
        </p>
      </div>


</body>

</html>

CodePudding user response：

It seems it's because of .section css styling

Try to remove : display: -webkit-flex;

from your css and see if it works!

CodePudding user response：

You can change the display property from section from flexto block. Then it works.

section {
  display: block;  
}

working example 

var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i  ) {
          coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight   "px";
            }
          });
        }
html {
  background-color: #daeff5;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  overflow-x: hidden;
  height: 100vh;
  position: relative;
}

header {
  background-color: #dc006a;
  padding: 5px;
  text-align: center;
  font-size: 15px;
  color: #00365e;
}

section {  
  display: block;
}

#content {
  min-height: calc(100vh - 140px);
}
#footer {
  height: 60px;
}

aside {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #00365e;
  padding: 20px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 190px;
  background-color: #dc006a;
}

li a {
  display: block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
  color: #00365e;
  font-size: 20px;
}

li a:hover {
  background-color: #7a003b;
  color: white;
}
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #daeff5;
  padding: 10px;
  text-align: center;
}

.footer {
  position: absolute;
  width: 100%;

  background-color: #dc006a;
  text-align: right;
}
.footer_text {
  padding-right: 20px;
  text-align: center;
  color: #00365e;
  font-size: 16px;
}

@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

table,
th,
td {
  border: 1px solid black;
  text-align: center;
}

p {
  text-align: center;
}

.navbar {
  width: 100%;
  background-color: #00365e;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #7a003b;
}

.active {
  background-color: #dc006a;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 20%;
  margin-bottom: 16px;
  padding: 2.5%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
}

.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
}

.container {
  padding: 0 16px;
}

.container::after,
.row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: grey;
}

.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 200px;
}

.button:hover {
  background-color: #555;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.collapsible {
      background-color: #dc006a;
      color: #00365e;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 20px;
    }

    .active,
    .collapsible:hover {
      background-color: #7a003b;
    }

    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #DAEFF5;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="stylesheet.css">
  <title>Gilde Dev-ops Solutions</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div >
    <header>
      <h1>Taken</h1>
    </header>
    <div >
      <a href="index.html"> Home</a>
      <a href="taken.html"> Taken</a>
      <a href="smoelenboek.html"> Smoelenboek</a>
      <a href="contact.html"> Contact</a>
      <a href="ideeenbox.html">Ideeënbox</a>
      <a href="projecten.html">Projecten</a>
    </div>
  </div>
  <section>

    <div id="content">

      <article>


        <button >Periode 1</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>Filmen</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Editen</td>
              <td>15</td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Voiceover</td>
              <td>1.5</td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Logo</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Script</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Css coderen</td>
              <td>25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Main pagina</td>
              <td>20</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Smoelenboek Pagina</td>
              <td>25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Taken pagina</td>
              <td>3</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Contact pagina</td>
              <td>15</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>projecten pagina</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Foutjes bijwerken</td>
              <td>5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Onderzoek arduino</td>
              <td>2.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Idee ergotimer uitwerken</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Arduino programeren</td>
              <td>10</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Fouten oplossen simulatie</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Arduino Uitwerken</td>
              <td>1.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc assembleren trainingen</td>
              <td>3</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc onderdelen noteren</td>
              <td>0.5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
              <td><img src="kruisje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc assembleren</td>
              <td>2</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Pc opstarten</td>
              <td>0.25</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Software instaleren</td>
              <td>0,5</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>

            <tr>
              <td>Huiswerk</td>
              <td>10</td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
              <td><img src="vinkje.jpg" width="15px" height="15px"></td>
            </tr>
            <tr>
              <td>totaal</td>
              <td>145,25</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>

        <button >Periode 2</button>
        <div >
          Content
        </div>

        <button >Periode 3</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>







          </table>
        </div>

        <button >Periode 4</button>
        <div >
          <table style="width:100%">
            <tr>
              <th>Taken</th>
              <th>Uren</th>
              <th>Tim</th>
              <th>Guus</th>
              <th>Soto</th>
              <th>Alexandru</th>
            </tr>

            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>



            <tr>
              <td>...</td>

              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
              <td>0</td>
            </tr>







          </table>
        </div>


      </article>
  </section>
  </div>

  <div id="footer">
    <section>
      <div >
        <p >
          Gilde Dev-Ops Solution 2021 ©
          <br />
          [email protected]
          <br />
           31884682000
          <br />
          Bredeweg 235, 6042GE Roermond
        </p>
      </div>


</body>

</html>

Page link：https//www.codepudding.com/Blockchain/226506.html

Prev:Last Bootstrap Radio-Element ist not shown
Next:how to obtain specific "key" from json stringify (my case)?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding