Different line height between neighboring cells of table
Suppose I have a table with one row, and two columns. I want to have single-spacing in the left cell, and I want double spacing in the right cell. Line-height appears to affect both cells 开发者_运维问答in the row. What can I do to make it work?
Just apply it only to the td and not to the tr.
http://jsfiddle.net/77a3V/6/
Notice that only I is affected.
EDIT: Updated to illustrate css class instead of inline style.
HTML
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
CSS
td {
line-height: 100%;
}
td + td {
line-height: 200%;
}
See this fiddle for a live example.
The solution is to define two different classes, td.single and td.double. The td (which is the column) with the appropriate line spacing:
<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>
You can use span elements to apply line height rules inside table cells:
<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>
加载中,请稍侯......
精彩评论