时间戳

首页 > 解决方案 > 将表格标题与数据对齐

javascript - 将表格标题与数据对齐

问题描述

我有以下代码：

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>

如图所示，标题单元格的标题与 boby 单元格不对齐，如何使用 css 解决此问题

标签： javascripthtmlcss

解决方案

也许删除一些CSS

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;
}
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>

推荐阅读