表格数据在html底部有很多空格

Question

我正在尝试减少表格行的底部。但它并没有减少。我有很大的字体，清除下面空间的唯一方法是减小字体大小，但同样会在下面创建相同比例的空间。我尝试在<tr> <td colspan="3" class="style1" height="250px"> <p id="two"> 2 </p> <p id="zero"> 0 </p> <p id="one"> 1 </p> <p id="six"> 6 </p> <p id="wishes"> Best wishes </p> <p id="sender"> From Steve </p> </td> 和<table style="padding: 2em;" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#455a64" width="100%"></table> （内联）中定义高度，但它们不会响应比现在更大的更小尺寸。这是我的代码：

150px

这是一个表头

action="/echo/html/"

字体为粗体<form method="post" action="/echo/html/" ajax="true">并逐渐变小 此时我正在考虑将其转换为photoshop中的图像并将其放入html中。

我的问题看起来像

的jsfiddle

https://jsfiddle.net/milan_light/505Lougg/

Answer 1

首先，我认为您可以使用'padding'和'margin'来替换表格的'cellpadding'和'cellspacing'，然后您可以重置css，然后设置表css。 这是一种好方法，不受其风格的影响;

Answer 2

这是一个例子，从p标签中删除了边距，并使用数字的span标签，这样它们就不会分成新的线条。

HTML：

<table class="table1">
    <tr>
        <td colspan="3" class="style1">
        <span id="two"> 2 </span>
        <span id="zero"> 0 </span>
        <span id="one"> 1 </span> 
        <span id="six"> 6 </span>
        <p id="wishes"> Best wishes </p>
        <p id="sender"> From Steve </p>
        </td>
    </tr>
</table>

CSS：

.table1 {
  width: 100%;
}

.style1 {
  padding: 2em;
  background: #455a64;
}

#wishes, #sender {
  margin: 0px;
}

这是JSFiddle https://jsfiddle.net/mikhailjan/qcvsthrm/2/