#jquery #html
#jquery #HTML
Вопрос:
Есть ли способ изменить высоту a thead в a table ? Я пробовал
$('thead').height('2px');
но безрезультатно, высота не меняется.
Что я делаю не так? Спасибо
Комментарии:
1. Какого эффекта вы пытаетесь достичь? Возможно, вы сможете получить то, что хотите, установив границу таблицы или отступ в первой строке тела (поскольку трудно представить, что у вас есть содержимое в блоке высотой 2 пикселя).
Ответ №1:
Вероятно, это зависит от браузера. Некоторые браузеры могут обрабатывать элемент thead как контейнер без какой-либо собственной высоты. Попробуйте установить высоту для самих элементов TH, используя Javascript или CSS. Обратите внимание, что для достижения чего-то меньшего, чем высота строки, вам также нужно будет установить высоту строки, поскольку размер элемента таблицы будет соответствовать его содержимому.
$('thead th').css({ height: '2px', line-height: '2px' });
или
<style>
.header th {
height: 2px;
line-height: 2px;
}
<style>
<table>
<thead class="header">
<th>Foo</th>
...
</thead>
...
</table>
Как отмечает @Marco в своем примере, вы, вероятно, также можете принудительно обрабатывать элемент как элемент уровня блока и устанавливать его высоту напрямую. В зависимости от того, чего вы пытаетесь достичь и что находится в строке, содержащейся в ТЕАДЕ, это может делать или не делать то, что вы хотите. Дополнительная информация о том, чего вы пытаетесь достичь, может помочь нам найти подходящее для вас решение.
Комментарии:
1. Кажется, что Dosent работает, см. jsfiddle.net/KWbxL/2 или jsfiddle.net/KWbxL/3 — это должно быть как-то связано с тем, как обрабатываются таблицы, поскольку он всегда пытается сделать содержимое видимым… Этот поток вызвал у меня наибольший интерес 🙂
2. @MarcoJohannesen — я не думаю, что вы можете размер элемента таблицы меньше, чем его содержимое. Я предполагаю, что для строки размером 2 пикселя в ней будут только пробелы, а также задана высота строки. Похоже, было бы более уместно использовать заполнение в первой строке основного текста, но я жду обновления от OP, чтобы уточнить. jsfiddle.net/KWbxL/4
3. Изначально я составил свой пример на основе вашего, который увеличил высоту заголовка. Конечно, если вы уменьшаете его, вы должны учитывать поведение при изменении размера и следить за тем, чтобы содержимое не увеличивало его больше, чем вы хотите. Еще одна веская причина не использовать таблицы ненадлежащим образом для макета!
4. Согласен согласен.. Отлично заметил, что проблема заключалась в высоте строки. Не думайте, что мы не согласны с тем, что это плохая идея — использовать элементы для простого стиля или выполнять работу CSS с JS. Спасибо за ответ!
Ответ №2:
Кажется, работает нормально.
Его отображение в виде таблицы, которая не может иметь МЕНЬШУЮ высоту, чем ее содержимое. Итак, если вам нужна высота 2px, вам нужно отобразить:block и иметь overflow:hidden для скрытия содержимого (которое не помещается в 2px).
И почему бы не использовать CSS, вместо того, чтобы использовать JS для создания вашего стиля 🙂
Комментарии:
1. Не работает в Safari. Мне пришлось установить высоту для элементов TH, чтобы он работал в Safari.
2. ДА. Теперь работает в Safari, когда вы заставили его обрабатывать элемент управления как элемент уровня блока.
3. Вся цель использования
theadбудет потеряна, если мы изменим свойство display . Если это так, мы должны использоватьdivвместоthead.