Налаштування висоти рядка таблиці

136

У мене є цей код:

<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

— Тило

165

спробуйте це:

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

— refaelos
джерело

160

Я не розумію, чому за це стільки голосів, це не вирішує проблему. Він працює, лише якщо у вас є лише 1 рядок тексту tr. Це рішення встановлює висоту лінії , а не trвисоту.

— BenR

2

Як було сказано в подальшому коментарі. висота повинна бути більшою, ніж висота найбільшого вмісту. В іншому випадку вона просто використовуватиме висоту найбільшого вмісту як мінімальну висоту. І так, це працює лише для одного рядка тексту.

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

1

Це корисно лише у випадку одного рядкового тексту.

— shekhardtu

23

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

.topic td{ height: 14px };

— Дейв
джерело

10

Чи не схоже , щоб працювати (Chromium 12 / Ubuntu 11.04) .

— Девід каже повернути Моніку

1

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

— Simon_Weaver

@dave У моєму випадку також @daveпрацювало лише рішення. line-heightне працює ні з trчи td. Не впевнений, чи має це щось спірне з тимчасовим часом, оскільки початковій публікації виповнилося шість років, і деякі правила html / css вже можуть змінитися, оскільки більшість браузерів зараз використовують HTML5.

— нам

Крім того, на мій досвід , якщо ви встановите висоту на tr, а потім 100% висоту або будь-яку висоту на td всередині нього, я вважаю, що система вважає, що висота встановлена на td, і вона не відповідає висоті tr і рядок встановлюється на висоту за замовчуванням. Тому просто встановіть висоту на td. З цієї причини я підтримав цю відповідь

— user3245268

9

Ви також можете видалити додаткові інтервали, якщо розмістити border-collapse: collapse;на столі CSS-оператор.

— fijter
джерело

6

Я знайшов найкращу відповідь для своїх цілей: використовувати:

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

Це white-space: nowrapважливо, оскільки воно не дозволяє клітинкам вашого рядка пробиватися через кілька рядків.

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

— Том Дікман
джерело

5

висота рядка працює лише тоді, коли вона більша за поточну висоту вмісту <td>. Отже, якщо у вас є піктограма розміром 50x50 у таблиці, trвисота рядка не зробить рядок меншим за 50 пікселів (+ прокладка).

Оскільки ви вже встановили накладку, 0вона повинна бути чимось іншим,
наприклад, великим розміром шрифту всередині, tdщо перевищує ваш 14px.

— Олексій
джерело

5

Якщо ви використовуєте Bootstrap, подивіться на paddingсвої tds.

— 1ман
джерело

1

раз мені потрібно виправити висоту певного значення, використовуючи вбудований CSS, як показано нижче.

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

— Пані Шафікур Рахман
джерело

1

Що стосується мене, я вирішив використовувати підкладки. Це не зовсім те, що потрібно, але може бути корисним у деяких випадках.

table td {
    padding: 15px 0;
}

— Євген Породко
джерело