Great Rash Posted August 25, 2009 Report Share Posted August 25, 2009 Необходимо сделать таблицу у которой <thead> будет фиксированным, а <tbody> будет скроллироваться. И чтоб в ИЕ работало. Есть у кого идеи?Желательно без скриптов, но в принципе и скриптами можно если чистым CSS никак нельзя. Quote Link to comment Share on other sites More sharing options...
0 s0rr0w Posted August 25, 2009 Report Share Posted August 25, 2009 Необходимо сделать таблицу у которой <thead> будет фиксированным, а <tbody> будет скроллироваться. И чтоб в ИЕ работало. Есть у кого идеи?Желательно без скриптов, но в принципе и скриптами можно если чистым CSS никак нельзя.Ищите в инете. Есть примеры и со скриптами и условно без скриптов... Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted August 25, 2009 Author Report Share Posted August 25, 2009 Собственно прежде чем создать топик я искал. Но результата, работающего во всех браузерах так и не нашел. В итоге я придумал свое решение, с небольшой помощью скрипта, но по большей части на CSS с использованием table-layout: fixed;В любом случае спасибо. Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted August 25, 2009 Report Share Posted August 25, 2009 А можно узнать пример кода на будущее? Quote Link to comment Share on other sites More sharing options...
0 dark_hero Posted August 25, 2009 Report Share Posted August 25, 2009 как-то давно тоже сталкивался с такой проблемой, поискал, погуглил, кое-что нашел, кое-что дописывал сам, вот что получилось таблица с фиксированным заголовком Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted August 25, 2009 Author Report Share Posted August 25, 2009 (edited) dark_heroПриведенный вами пример у меня не заработал в ИЕ. А в Мозилле работал криво.psywalkerВот такая штука у меня получилась:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> * { margin: 0; padding: 0; } table { width: 100%; table-layout: fixed; } td { background: #efc; border: #69c 1px solid; } div { overflow-y: scroll; height: 100px; } </style> <script type="text/javascript"> function normalize() { var h = document.getElementById('head'); var b = document.getElementById('body'); var c = document.getElementById('cont'); h.style.width = b.style.width = c.offsetWidth - 17 + 'px'; } window.onload = function() { normalize(); } window.onresize = function() { normalize(); } </script></head><body> <table id="head"> <tr> <td> header </td> <td> header </td> <td> header </td> <td> header </td> <td> header </td> </tr> </table> <div id="cont"> <table id="body"> <tr> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> </tr> <tr> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> </tr> <tr> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> </tr> <tr> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> </tr> <tr> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> <td> cell </td> </tr> </table> </div></body></html> Edited August 25, 2009 by Great Rash Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted August 25, 2009 Report Share Posted August 25, 2009 Спасибо, я только не понял, зачем нужен JS, если можно просто таблице задать ширину? Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted August 25, 2009 Author Report Share Posted August 25, 2009 JS нужен из-за того, что ширину я хочу резиновую. А при ширине 100% в ИЕ7 появляется горизонтальный скролл. Плюс в Мозилле и ИЕ8 немного криво стоит шапка таблицы. Скрипт уменьшает ширину таблицы от исходной на 17 пикселей (ширина скроллбара).Есть только один минус - надо ставить overflow: scroll; вместо overflow: auto; иначе будут некрасивости. Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted August 25, 2009 Report Share Posted August 25, 2009 аа, понял, спасибо дружище Quote Link to comment Share on other sites More sharing options...
0 dark_hero Posted August 26, 2009 Report Share Posted August 26, 2009 dark_heroПриведенный вами пример у меня не заработал в ИЕ. А в Мозилле работал криво.не знаю, не знаю, у меня все отлично работает и в ие и в фф, проверьте еще раз, может не так что-нибудь сделали:http://neoprizma.net/demo/table-with-fixed-header.html Quote Link to comment Share on other sites More sharing options...
0 Great Rash Posted August 26, 2009 Author Report Share Posted August 26, 2009 Вы пробовали поставить doctype к этому коду? В ИЕ7 у второй таблицы прокрутки нет, а у первой таблицы ячейки частично уехали под скролл. Quote Link to comment Share on other sites More sharing options...
Question
Great Rash
Необходимо сделать таблицу у которой <thead> будет фиксированным, а <tbody> будет скроллироваться. И чтоб в ИЕ работало. Есть у кого идеи?
Желательно без скриптов, но в принципе и скриптами можно если чистым CSS никак нельзя.
Link to comment
Share on other sites
10 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.