具有不同单元格高度的 HTML 表格行答案

【问题标题】：HTML table rows with varying cell heights具有不同单元格高度的 HTML 表格行
【发布时间】：2015-10-13 21:33:22
【问题描述】：

我有一个 HTML 表格，里面填满了各种大小的内容。有些可能只有一个段落。

我想要完成的只是让单元格自动调整高度以支持各种内容，而不是给每一行一个固定的大小（因为这看起来很糟糕）。

<td align="left" width="10%" height="130"><div>{{this.val8}}</div></td>
<td align="left" height="130"><div>{{{this.val7}}}</div></td>
<td align="left" height="130"><div>{{this.val6}}</div></td>
<td align="left" height="130"><div>{{this.val}}</div></td>
<td height="130" width="80%"><div>{{{this.val0}}}</div></td>
<td height="130"><div>{{{this.val8}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val1}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val2}}}</div></td>
<td height="130" width="75%"><div>{{{this.val3}}}</div></td>
<td height="130"><div>{{this.val4}}</div></td> 
<td height="130"><div>{{this.val5}}</div></td>

现在，我为每个单元格设置了固定高度。一般来说，大多数单元格都适合这个高度，但我希望不要更小。

任何提示或建议都会很棒。

谢谢！

【问题讨论】：

标签： html css handlebars.js

【解决方案1】：

让我们为初学者清理你的标记：

http://jsfiddle.net/x3a6bu7L/

<table>
    <tr>
        <td align="left">
            {{this.val8}}
        </td>
        <td align="left">
            {{this.val7}}
        </td>
        <td align="left">
            {{this.val6}}
        </td>
        <td align="left">
            {{this.val}}
        </td>
        <td>
            {{this.val0}}
        </td>
        <td>
            {{this.val8}}
        </td>
        <td align="right">
            {{this.val1}}
        </td>
        <td align="right">
            {{this.val2}}
        </td>
        <td>
             {{this.val3}}
        </td>
        <td>
            {{this.val4}}
        </td> 
        <td>
            {{this.val5}}
        </td>
    </tr>
</table>

TD 单元格中不需要那些 DIV 元素。
高度设置不正确且没有必要。这设置高度的正确方法是 height:130px，如果你真的需要的话。
您的宽度不正确。如果你想使用你需要的百分比所有 TD 宽度百分比加起来为 100%
不要使用内联 CSS。使用外部 CSS 样式表或封装 HEAD 中的 STYLE 元素中的所有样式。

如果您需要为单元格设置垂直对齐方式，请使用：

td             { vertical-align:top; }

【讨论】：

【解决方案2】：

只需删除所有高度属性。另请注意，height 和 width 属性都已过时 - 请改用样式。

【讨论】：