我有以下结果(下面的 运行代码片段 按钮),我不需要每个单元格周围的边框,我需要一个简单的表格,如:
table td{
border:1px solid #000000;
}
<table class="table table-bordered">
<thead>
<tr>
<th>Sr No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Add</th>
</tr>
</thead>
<tbody class="allign-center">
<tr>
<td>1</td>
<td class="proname">MARHABA SAFOOF TABKHIR</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>2</td>
<td class="proname">MARHABA JAWARISH SHAHI AMBRI</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>3</td>
<td class="proname">MARHABA JAWARISH ZAROONI SADA</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>4</td>
<td class="proname">MARHABA SAFOOF HAZAM</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
</tbody>
</table>
最佳答案
使用 border-collapse: collapse
table {
border-collapse: collapse;
}
border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 那样分离。
table {
border-collapse: collapse;
border:1px solid #69899F;
}
table td{
border:1px dotted #000000;
padding:5px;
}
table td:first-child{
border-left:0px solid #000000;
}
table th{
border:2px solid #69899F;
padding:5px;
}
<table class="table table-bordered">
<thead>
<tr>
<th>Sr No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Add</th>
</tr>
</thead>
<tbody class="allign-center">
<tr>
<td>1</td>
<td class="proname">MARHABA SAFOOF TABKHIR</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>2</td>
<td class="proname">MARHABA JAWARISH SHAHI AMBRI</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>3</td>
<td class="proname">MARHABA JAWARISH ZAROONI SADA</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
<tr>
<td>4</td>
<td class="proname">MARHABA SAFOOF HAZAM</td>
<td><input class="qty" type="number"></td>
<td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
</tr>
</tbody>
</table>
关于需要 1 个像素边框的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40035389/