表格标题中的单元格间距
[英]Cell spacing in table header
问题描述
i would like to remove white spacing between cells as shown below and also the Total is not really center to the table.
我想删除单元格之间的白色间距，如下所示，并且总数也不是表格的真正中心。 How to i center align so that i would be in line with other fields如何居中对齐，以便与其他字段保持一致
please see the code used.请查看使用的代码。
<p><br>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 300px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Hardware</span></p>
</td>
<td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">QTY</span></p>
</td>
<td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Price</span></p>
</td>
<td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;">
<p><span style="font-family:'Arial',sans-serif; font-weight: normal;">Total</span></p>
</td>
</tr>
<br>
<tr>
<td style="width: 300px; border-left: solid windowtext 1.0pt; text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Engineering Desktop</span></p>
</td>
<td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">3</span></p>
</td>
<td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">503.00 </span></p>
</td>
<td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; ">
<p><span style="font-family:'Arial',sans-serif; font-weight: normal;">1509</span></p>
</td>
</tr>
<tr>
<td style="width: 300px; border-left: solid windowtext 1.0pt; text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">BIM-Spec Desktop</span></p>
</td>
<td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">1</span></p>
</td>
<td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;">
<p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">765.00 </span></p>
</td>
<td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; ">
<p><span style="font-family:'Arial',sans-serif; font-weight: normal;">765</span></p>
</td>
</tr>
</table></p>
1 个解决方案
解决方案1
0 已采纳 2020-09-09 07:03:30
Add border-collapse:collapse;添加border-collapse:collapse; property to table表的属性
Result:结果：
table{ border-collapse:collapse; }
<p><br> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td style="width: 300px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Hardware</span></p> </td> <td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">QTY</span></p> </td> <td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Price</span></p> </td> <td style="width: 200px; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; border-left: solid windowtext 1.0pt; border-top: solid windowtext 1.0pt; background: #D9D9D9; text-align: center;"> <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">Total</span></p> </td> </tr> <br> <tr> <td style="width: 300px; border-left: solid windowtext 1.0pt; text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">Engineering Desktop</span></p> </td> <td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">3</span></p> </td> <td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">503.00 </span></p> </td> <td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; "> <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">1509</span></p> </td> </tr> <tr> <td style="width: 300px; border-left: solid windowtext 1.0pt; text-align: center;border-top: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">BIM-Spec Desktop</span></p> </td> <td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">1</span></p> </td> <td style="width: 200px; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: none;"> <p><span style="font-family: 'Arial',sans-serif; font-weight: normal;">765.00 </span></p> </td> <td style="width: 200px; border-bottom: solid windowtext 1.0pt; text-align: center;border-top: none; border-left: none; border-bottom: solid windowtext 1.0pt; border-right: solid windowtext 1.0pt; "> <p><span style="font-family:'Arial',sans-serif; font-weight: normal;">765</span></p> </td> </tr> </table></p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
文字间距表格储存格 - Text spacing table cell
表格单元格的间距 - Table cell's spacing
div表格中的单元格间距 - Cell spacing in div table
无法删除表格单元格中的间距 - Cannot remove spacing in table cell
HTML表格中的动态单元格间距 - Dynamic cell spacing in HTML table
表格标题和正文间距独立 - Table header and body spacing independently
具有单元格间距但没有外部间距的全宽表 - Full-width table with cell spacing, but no outer spacing
在Outlook 2010中删除表格单元格间距 - Remove table cell spacing in Outlook 2010
间距 <li> 带有显示表格的标签 - Spacing in <li> tags with display table-cell
如何在一个单元格内创建均匀的单元格间距<div id="text_translate"><p>我一直在做一个小的。 但是，我有一个表格，其中所有单元格都根据每个单元格中文本的大小自动调整大小。 我将如何 go 使所有单元格的宽度相同？ 例如，有 10 个单元格，每个单元格总是占用表格宽度的 10%。</p><p> 您可以看到表格的 JSFiddle，其中单元格的宽度取决于此处的文本： <a href="https://jsfiddle.net/0sLb8cyo/2/" rel="nofollow noreferrer">https://jsfiddle.net/0sLb8cyo/2/</a></p><pre> <table> <tr> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> </tr> <tr> <td>car</td> <td>car</td> <td>car</td> <td>boat</td> <td>boat</td> <td>boat</td> <td>boat</td> <td>boat</td> <td>boat</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> <td>car</td> </tr> </table></pre><p> 提前致谢。</p></div><table></table> - How to create even cell spacing within a <table>
相关标签