标题和复选框不对齐

Question

我正在创建出勤，但我的复选框没有与天数正确对齐。我如何正确对齐它们？

我尝试更改复选框的宽度或任何大小，更改标题，甚至尝试更改输入类型文本，但没有任何反应。

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

正如@DShadrin 所写，您的问题是，您在<thead> 和<tbody> 之间还有另一个<table> 标签：

</thead>

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

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

<tbody>

因此，该表分为两个表，它们独立对齐它们的元素。如果删除第二个 <table> 标签，元素将正确对齐：

顺便说一句：您将表头添加为新行，因为您选择了索引为 0 (table.rows[0]) 的第一行。如果您希望新行包含文本输入和复选框，则应将其更改为索引 1：

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

工作示例：

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>