Header and Checkboxes not align

Question

I'm creating an attendance but my checkboxes are not properly align with the number of days. how do I properly align them?

I tried changing the width or any size of the checkboxes, changing the header, and even tried changing the input type text but nothing is happening.

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; switch (newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } }

 body { line-height: 1.9; margin: 2em; min-width: 1000000px; } th { background-color: #001f3f; color: #fff; padding: 1em 1.3em; } td { border-top: 5px solid #eee; padding: 0.5em 1em; } input { cursor: pointer; } /* Column types */ th.missed-col { background-color: #f00; } } th.Attend-col { background-color: #f00; } td.Attend-col { background-color: #ffecec; color: #f00; text-align: center; }.name-col { text-align: left; min-width: 11rem; } input::placeholder { font-weight: bold; opacity: .5; color: black; }

 <h1>Attendance</h1> <label for="start">Start month:</label> <input type="month" id="start" name="start" min="2018-03" value="2018-05"> <table> <thead> <tr> <th class="name-col">Name</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> </tr> </thead> <input type="button" value="Add Row" onclick="addRow('dataTable')"> <table id="dataTable" width="350px" border="1"> <tbody> <tr class="visitor"> <td class="name-col"><input type="text" placeholder="Your name"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td> <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button> </td> </tr> </tbody> </table> <h1>Attendance</h1> <label for="start">Start month:</label> <input type="month" id="start" name="start" min="2018-03" value="2018-05"> <table> <thead> <tr> <th class="name-col">Name</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> </tr> </thead> <input type="button" value="Add Row" onclick="addRow('dataTable')"> <table id="dataTable" width="350px" border="1"> <tbody> <tr class="visitor"> <td class="name-col"><input type="text" placeholder="Your name"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td> <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button> </td> </tr> </tbody> </table>

Answer 1

Like @DShadrin wrote, your issue is, that you have another <table> tag between <thead> and <tbody> :

  </thead>

  <input type="button" value="Add Row" onclick="addRow('dataTable')">

<table id="dataTable" width="350px" border="1">

  <tbody>

Therefor the table is divided in two tables, which allign their elements independently. If you remove the second <table> tag, the elements are aligned properly:

By the way: you add the table head as new row, because you select the first row with the index 0 ( table.rows[0] ). You should change it to the index 1 if you want the new row to contain the text input and the checkboxes:

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

Working example:

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[1].cells[i].innerHTML; switch (newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } }

 body { line-height: 1.9; margin: 2em; min-width: 1000000px; } th { background-color: #001f3f; color: #fff; padding: 1em 1.3em; } td { border-top: 5px solid #eee; padding: 0.5em 1em; } input { cursor: pointer; } /* Column types */ th.missed-col { background-color: #f00; } th.Attend-col { background-color: #f00; } td.Attend-col { background-color: #ffecec; color: #f00; text-align: center; }.name-col { text-align: left; min-width: 11rem; } input::placeholder { font-weight: bold; opacity: .5; color: black; }

 <h1>Attendance</h1> <label for="start">Start month:</label> <input type="month" id="start" name="start" min="2018-03" value="2018-05"> <table id="dataTable" width="350px" border="1"> <thead> <tr> <th class="name-col">Name</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> </tr> </thead> <input type="button" value="Add Row" onclick="addRow('dataTable')"> <tbody> <tr class="visitor"> <td class="name-col"><input type="text" placeholder="Your name"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td class="attend-col"><input type="checkbox"></td> <td> <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button> </td> </tr> </tbody> </table>