<table id="entryDetail"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>宽度铺满滚动和选中删除
时间: 2023-08-14 09:25:26 浏览: 195
您可以使用以下代码来实现您的要求:
```html
<style>
#entryDetail {
width: 100%;
table-layout: fixed;
}
th, td {
padding: 10px;
text-align: center;
}
th:first-child, td:first-child {
width: 10%;
}
th:nth-child(2), td:nth-child(2) {
width: 15%;
}
th:nth-child(3), td:nth-child(3), th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) {
width: 12%;
}
th:nth-child(6), td:nth-child(6) {
width: 20%;
}
th:last-child, td:last-child {
width: 16%;
}
tbody tr:hover {
background-color: #f5f5f5;
}
</style>
<script>
function deleteTableRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
<table id="entryDetail">
<thead>
<tr>
<th>操作</th>
<th>提单号/运单号</th>
<th>一程日期</th>
<th>二程日期</th>
<th>预计到货日期</th>
<th>海船公司</th>
<th>放箱日期</th>
<th>放箱单上传</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="button" name="comment" onclick="deleteTableRow(this)" value="删除"></td>
<td><input type="text" name="comment"></td>
<td><input type="date" name="date1"></td>
<td><input type="date" name="date2"></td>
<td><input type="date" name="date3"></td>
<td><input type="text" name="comment1"></td>
<td><input type="date" name="date4"></td>
<td><input type="file" name="attachment"></td>
</tr>
</tbody>
</table>
```
此代码将表格的宽度设置为100%,并使其表格布局固定。它还将表头和单元格的填充和文本对齐方式设置为居中。每个表头和单元格都有一个宽度百分比,以便在表格宽度变化时自适应。还添加了一个鼠标悬停样式以提高用户体验。在代码的底部,有一个JavaScript函数deleteTableRow(btn),它将从表格中删除所在行。
阅读全文