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

Question

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

<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; }

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

Answer 1

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

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

Answer 2

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

.topic td{ height: 14px };

Answer 3

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

Answer 4

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

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

Answer 5

Если вы используете Bootstrap, посмотрите на padding ваших td s.

Answer 6

Я нашел лучший ответ для моих целей:

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

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

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

Answer 7

раз мне нужно исправить высоту строки с определенной оценкой используя встроенный CSS следующим образом ..

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