Here's the code snippet I'm currently working with:
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex - 2; // this -> td -> tr // -2 because the first 2 rows are used for header
var tbl = document.querySelector('tbody');
if(tbl && tbl.rows.length > 1) {
tbl.deleteRow(i);
Array.from(tbl.rows).forEach((row, index) => {
row.cells[0].innerHTML = index + 1;
});
}
}
function insRow(row) {
var i = row.parentNode.parentNode.rowIndex - 2; // this -> td -> tr // -2 because the first 2 rows are used for header
var tbl = document.querySelector('tbody');
var row = document.createElement('tr');
row.innerHTML=`
<th></th>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow(this)" /></td>
`;
var len = tbl.rows.length;
row.cells[0].innerHTML = len + 1;
tbl.insertBefore(row, tbl.children[i+1]);
Array.from(tbl.rows).forEach((row, index) => {
row.cells[0].innerHTML = index + 1;
});
//tbl.appendChild(row);
}html, body {
width: max-content;
}
table {
max-width:980px;
table-layout:fixed;
margin:auto;
}
th, td {
padding:5px 10px;
border:1px solid #000;
}
thead, tfoot {
background:#f9f9f9;
display:table;
width:100%;
width:calc(100% - 8px);
}
tbody {
height:300px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
tbody tr {
display:table;
/*width:100%;*/
table-layout:fixed;
}
th:first-of-type { width: 30px; }
th {
background: lightblue;
border-color: white;
}
#latbox {width: 100px;} <table>
<caption>Monthly savings</caption>
<thead>
<tr>
<th colspan="5">The table header</th>
</tr>
<tr>
<th>POI</td>
<th>Latitude</td>
<th>Longitude</td>
<th>Delete?</td>
<th>Add Rows?</td>
</tr>
</thead>
<tbody >
<tr>
<th>1</th>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow(this)" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">The table footer</th>
</tr>
</tfoot>
</table>The alignment of the header cells' titles doesn't match with the body cells. How can I adjust this using CSS?