你能帮我修复输入的对齐问题吗?我需要将它们放在最后两列(“主要价格”和“次要价格”)之上,为了更好地理解,我添加了一个线框。
我在表格单元格中添加了引导列,但它破坏了整个表格,这是一个最小的示例:
https://jsfiddle.net/ma7pv408/
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908e908c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<table class="table">
<thead class="thead-dark">
<tr>
<th class="col-1" scope="col">#</th>
<th class="col-3" scope="col">Name</th>
<th class="col-4" scope="col">Primary price</th>
<th class="col-4" scope="col">Secondary price</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-1" scope="row">1</th>
<td class="col-3">Mark</td>
<td class="col-4">9€</td>
<td class="col-4">100€</td>
</tr>
<tr>
<th class="col-1" scope="row">2</th>
<td class="col-3">Jacob</td>
<td class="col-4">23€</td>
<td class="col-4">208€</td>
</tr>
<tr>
<th class="col-1" scope="row">3</th>
<td class="col-3">Larry</td>
<td class="col-4">21€</td>
<td class="col-4">90€</td>
</tr>
</tbody>
</table>
</div>
最佳答案
我已经想出了解决这个问题的方法。
在表格顶部添加另一行。由于以下行中有 4 个单元格,因此您需要添加以下内容来创建新行:
<tr id='price-row'>
<td colspan=2>Main Prices</td>
<td><input id='input1'></td>
<td><input id='input2'></td>
</tr>
在CSS中:
#price-row, #price-row td{
border: none;
}
您已完成并根据需要进行其他一些 ui 更改。这是js fiddle .
不要忘记删除 <thead>
从表格标题开始,否则输入框将出现在第二行本身。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />
<div class="row">
<table class="table">
<tr id='price-row'>
<td colspan=2>Main Prices</td>
<td><input id='input1'></td>
<td><input id='input2'></td>
</tr>
<tr>
<th class="col-1" scope="col">#</th>
<th class="col-3" scope="col">Name</th>
<th class="col-4" scope="col">Primary price</th>
<th class="col-4" scope="col">Secondary price</th>
</tr>
<tbody>
<tr>
<th class="col-1" scope="row">1</th>
<td class="col-3">Mark</td>
<td class="col-4">9€</td>
<td class="col-4">100€</td>
</tr>
<tr>
<th class="col-1" scope="row">2</th>
<td class="col-3">Jacob</td>
<td class="col-4">23€</td>
<td class="col-4">208€</td>
</tr>
<tr>
<th class="col-1" scope="row">3</th>
<td class="col-3">Larry</td>
<td class="col-4">21€</td>
<td class="col-4">90€</td>
</tr>
</tbody>
</table>
</div>
</div>
关于html - 将输入与表列对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68194585/