Установка высоты строки таблицы

137

У меня есть этот код:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

Строки расположены слишком далеко друг от друга. Я хочу, чтобы линии были ближе друг к другу.

Я добавил следующий CSS, но он, похоже, ничего не меняет.

.topics tr { height: 14px; }

Что я делаю не так?

html css

— Хироми Нагашим
источник

Связанный: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr

— Тило

166

попробуй это:

.topics tr { line-height: 14px; }

— refaelos
источник

160

Я не понимаю, почему у него так много голосов, это не решает проблемы. Это работает, только если у вас есть только одна строка текста в tr. Это решение устанавливает высоту строки , а не trвысоту.

— BenR

2

Как упоминалось в более позднем комментарии. высота должна быть больше, чем высота вашего самого большого контента. В противном случае он просто будет использовать высоту самого большого содержимого как минимальную высоту. И да, это работает только для одной строки текста.

— Варун Чаттерджи

1

Это полезно только в случае однострочного текста.

— шехардту

23

попробуйте установить атрибут td так:

.topic td{ height: 14px };

— Дейв
источник

10

Кажется, не работает (Chromium 12 / Ubuntu 11.04) .

— Дэвид требует восстановить Монику

1

шутки в сторону? Я думал, что это всегда сработает. безусловно, делает сейчас. в любом случае это решение, которое я считаю лучшим, поскольку способ работы ячеек таблицы заключается в расширении до их содержимого. так что heightв a tdфактически есть min-height, что в данном случае на самом деле то, что вы хотите

— Simon_Weaver

@dave В моем случае также @daveработало только решение. line-heightне работало ни с trни td. Не уверен, связано ли это со сроками, поскольку исходному посту шесть лет, и некоторые правила html / css, возможно, уже изменились, поскольку большинство браузеров теперь используют HTML5.

— nam

Кроме того, по моему опыту , если вы установите высоту на tr, а затем на 100% высоту или любую высоту на td внутри нее, я считаю, что система думает, что высота установлена на td, и она не соответствует высоте tr, и для строки устанавливается высота по умолчанию. Так что просто установите высоту тд. Это причина, по которой я проголосовал за этот ответ

— user3245268

9

Вы также можете удалить некоторые лишние интервалы, если разместите в border-collapse: collapse;своей таблице инструкцию CSS.

— fijter
источник

6

Я нашел, что лучший ответ для моих целей - использовать:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

Это white-space: nowrapважно, поскольку это предотвращает разбиение ячеек вашей строки на несколько строк.

Я Personnally , как добавить text-overflow: ellipsisк моим thи tdэлементы , чтобы сделать текст переполняет выглядеть лучше, добавив завершающие fullstops, например ,Too long gets dots...

— Том Дикман
источник

5

line-height работает только в том случае, если он больше текущей высоты содержимого <td>. Итак, если у вас есть значок 50x50 в таблице, trвысота строки не сделает строку меньше 50 пикселей (+ отступ).

Поскольку вы уже установили отступы, 0это должно быть что-то еще,
например, большой размер шрифта внутри, tdкоторый больше ваших 14 пикселей.

— Alex
источник

5

Если вы используете Bootstrap, посмотрите на paddingсвой файл tds.

— 1man
источник

1

как только мне нужно исправить высоту конкретной оценочной строки, используя встроенный CSS, как показано ниже.

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

— Г-н Шафикур Рахман
источник

1

Что касается меня, я решил использовать прокладки. Это не совсем то, что вам нужно, но в некоторых случаях может быть полезно.

table td {
    padding: 15px 0;
}

— Евгений Породько
источник