Question

假设我有一个包含一行和两列的表。我想在左侧单元格中有单个间距，我希望在右侧单元格中有双倍间距。行高似乎会影响行中的两个单元格。我能做些什么才能让它发挥作用？

Answer 1

只需将其应用于td，而不应用于tr。

请注意，只有我受到影响。

编辑：更新以说明css类而不是内联样式。

Answer 2

<强> HTML

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

<强> CSS

td {
    line-height: 100%;
}

td + td {
    line-height: 200%;
}

有关实例，请参阅this fiddle。

Answer 3

解决方案是定义两个不同的类td.single和td.double。具有适当行间距的td（即列）：

<head>
<style type="text/css">
td.single {line-height:100%;}
td.double {line-height:200%;}
</style>
</head>

<body>
<table border="1">
<tr>
  <td class="single">single<br />spacing</td>
  <td class="double">double<br />spacing</td>
</tr>
</table>

</body>
</html>

Answer 4

您可以使用span元素在表格单元格中应用行高规则：

<table>
    <tr style="vertical-align: top">
        <td>
            <span style="line-height: 200%">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium justo id ante dapibus eget molestie dolor pharetra. Nullam ipsum elit, ultricies non semper aliquet, volutpat et urna. Integer gravida nisi quis massa congue faucibus. Integer commodo accumsan nunc quis pharetra. Aliquam volutpat sapien sed augue eleifend rhoncus. Ut ac suscipit mi. Sed rhoncus elementum augue, in imperdiet massa consequat a. Vestibulum cursus arcu a dolor ullamcorper vulputate. Praesent ut nisi vitae magna vulputate tincidunt. Proin lectus purus, mattis ut fringilla non, accumsan eget mi. Nunc nisl erat, vestibulum eget varius eget, cursus vel ligula. Vestibulum facilisis condimentum congue. Nullam eleifend risus vel massa sagittis in vulputate neque placerat. Maecenas tincidunt facilisis eros at adipiscing. In dolor eros, lacinia ut auctor in, luctus vel leo. Sed nec sapien vel arcu accumsan placerat porta at nisl. Etiam mi ligula, facilisis a sodales eget, lacinia nec orci.
            </span>
        </td>
        <td>
            <span style="line-height: 100%">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium justo id ante dapibus eget molestie dolor pharetra. Nullam ipsum elit, ultricies non semper aliquet, volutpat et urna. Integer gravida nisi quis massa congue faucibus. Integer commodo accumsan nunc quis pharetra. Aliquam volutpat sapien sed augue eleifend rhoncus. Ut ac suscipit mi. Sed rhoncus elementum augue, in imperdiet massa consequat a. Vestibulum cursus arcu a dolor ullamcorper vulputate. Praesent ut nisi vitae magna vulputate tincidunt. Proin lectus purus, mattis ut fringilla non, accumsan eget mi. Nunc nisl erat, vestibulum eget varius eget, cursus vel ligula. Vestibulum facilisis condimentum congue. Nullam eleifend risus vel massa sagittis in vulputate neque placerat. Maecenas tincidunt facilisis eros at adipiscing. In dolor eros, lacinia ut auctor in, luctus vel leo. Sed nec sapien vel arcu accumsan placerat porta at nisl. Etiam mi ligula, facilisis a sodales eget, lacinia nec orci.
            </span>
        </td>
    </tr>
</table>

表格的相邻单元格之间的不同行高

4 个答案: