Различная высота линии между соседними ячейками таблицы - PullRequest
Новая
       1

Различная высота линии между соседними ячейками таблицы

0 голосов
/ 24 июня 2011

Предположим, у меня есть таблица с одной строкой и двумя столбцами.Я хочу иметь одинарный интервал в левой ячейке, и я хочу двойной интервал в правой ячейке.Высота строки влияет на обе ячейки в строке.Что я могу сделать, чтобы это работало?

Ответы [ 4 ]

1 голос
/ 24 июня 2011

HTML 

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

CSS 

td {
    line-height: 100%;
}

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

См. эту скрипку для живого примера.

1 голос
/ 24 июня 2011

Просто примените его только к td, а не к tr.

http://jsfiddle.net/77a3V/6/

Обратите внимание, что это касается только меня.

РЕДАКТИРОВАТЬ:Обновлено, чтобы проиллюстрировать класс CSS вместо встроенного стиля.

0 голосов
/ 24 июня 2011

Вы можете использовать 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>
0 голосов
/ 24 июня 2011

Решение состоит в том, чтобы определить два разных класса, 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...