Question

正如你在这个小提琴中看到的那样 Fiddle

表格从所有具有相同高度的行开始，但后来它们的高度更高，为什么会这样？

这只是表格的一部分，请查看小提琴

    <table border="2" cellpadding="0" cellspacing="0"
 height="190">
    <tbody>
      <tr bgcolor="#ffffcc">
        <td class="Normal" style="width: 116px;"
 height="16" valign="top">
        <p style="" align="center"><strong><font
 face="Arial, Helvetica, sans-serif" size="2">
        <span
 style="font-size: 10pt; font-family: Arial; color: blue"> <font
 color="#000066"> FECHA</font></span></font></strong></p>
        </td>
        <td class="Normal" height="16" valign="top"
 width="90">
        <p style="" align="center"><strong><font
 face="Arial, Helvetica, sans-serif" size="2">
        <span
 style="font-size: 10pt; font-family: Arial;"> <font
 color="#000066">Número</font></span></font></strong></p>
        </td>
        <td colspan="3" class="Normal" height="16"
 valign="top" width="357">
        <p style="" align="center"><strong><font
 color="#990000" face="Arial, Helvetica, sans-serif"
 size="2"><span
 style="font-size: 10pt; font-family: Arial; color: blue"> <font
 color="#000066">Variaciones</font></span></font></strong></p>
        </td>
      </tr>
      <tr>
        <td class="Normal" style="width: 116px;"
 height="22" valign="top">
        <div align="center"></div>
        </td>
        <td class="Normal" bgcolor="#ffffcc"
 height="22" valign="top" width="90">
        <p style="" align="center"><strong><font
 color="#000066" face="Arial, Helvetica, sans-serif"
 size="2"><span
 style="font-size: 10pt; font-family: Arial; color: blue">Indice</span></font></strong></p>
        </td>
        <td class="Normal" bgcolor="#ffffcc"
 height="22" valign="top" width="357">
        <p style="" align="center"><strong><font
 color="#000066" face="Arial, Helvetica, sans-serif"
 size="2"><span
 style="font-size: 10pt; font-family: Arial; color: blue">Mensual</span></font></strong></p>
        </td>
        <td class="Normal" bgcolor="#ffffcc"
 height="22" valign="top" width="357">
        <p style="" align="center"><strong><font
 face="Arial, Helvetica, sans-serif" size="2">
        <span
 style="font-size: 10pt; font-family: Arial; color: blue">Acum.
del Año</span></font></strong></p>
        </td>

Answer 1

这是因为某些TD标签内部有P标签。请改用span。

这样做：

 <tr>
        <td class="Normal" style="width: 116px;" height="13" valign="top">
          <span style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
    <span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></span>

</tr>

而不是：

<tr>
        <td class="Normal" style="width: 116px;" height="13" valign="top">
          <p style="" align="center"><strong style="font-weight: 400;"><font face="Arial, Helvetica, sans-serif" size="2">
    <span style="font-family: Arial;">31/01/<a name="2009">2009</a></span></font></strong></p>
        </td>

</tr>

Answer 2

28/02/2009的行和下面的行更高的原因非常简单：

在28/02/2009以上的行中，第一个表格单元格没有元素;
在28/02/2009的行和其下面的行中，第一个表格单元格有一个元素。

我假设HTML代码是在WYSIWYG编辑器中创建的;这可以解释为什么它如此臃肿。通过从HTML代码中删除所有直接格式并将其替换为CSS样式规则，可以使代码更小。通过直接格式化，我的意思是

align="center" height="1" valign="top" width="90"

<td>

style="font-weight: 400;"位于元素内的<td>元素
整个...元素，
整个...元素（显然除了它们的内容）。

然后你会得到如下内容：

<tr>
  <th>28/02/2009</th>
  <td>113,59</td>
  <td>0,57</td>
  <td>6,81</td>
  <td>14,56</td>
</tr>

然后，您需要决定字体，字体大小等，因为某些直接格式是矛盾的（span元素上的Tahoma，font上的Arial elements，...）并为表创建CSS规则。

Answer 3

我只想用css设置tr元素的高度：

tr {
    height: 40px; /* or whatever else */
}

编辑：您还可以尝试设置td的高度：

td {
    height: 40px;
}

表有一些高度更大的tr

3 个答案: