заголовок таблицы замораживания с css первые строки находятся под заголовком

Question

Я смог заморозить мои заголовки таблицы и иметь ширину заголовков, а остальные строки совпадают. Но я не могу получить свои первые 2 строки, чтобы показать из-под заголовка.

table { 
    font-family:Arial, Helvetica, sans-serif; 
    color:#666; 
    font-size:12px; 
    background:#eaebec; 
    border:#ccc 1px solid; 
    border-radius:3px; 
    border-collapse:collapse; 
    border-spacing: 0; 
    box-shadow: 0 1px 2px #d1d1d1; 
} 
table th { 
    padding:2px 2px 2px 2px; 
    border-top:0; 
    border-bottom:1px solid #e0e0e0; 
    border-left: 1px solid #e0e0e0; 
    background: #ededed; 
} 
table th:first-child { 
    text-align: left; 
} 
table tr:first-child th:first-child { 
    border-top-left-radius:3px; 
    border-left: 0; 
} 
table tr:first-child th:last-child { 
    border-top-right-radius:3px; 
} 
table tr { 
    text-align: center; 
} 
table td:first-child { 
    text-align: left; 
    border-left: 0; 
} 
table td { 
    padding:2px 2px 2px 2px; 
    border-top:0; 
    border-bottom:1px solid #e0e0e0; 
    border-left: 1px solid #e0e0e0; 
    white-space: nowrap; 
} 
table tr:last-child td { 
    border-bottom:0; 
} 
table tr:last-child td:first-child { 
    border-bottom-left-radius:3px; 
} 
table tr:last-child td:last-child { 
    border-bottom-right-radius:3px; 
} 
table tr:hover td { 
    background: #F7FE2E; 
} 
table th, 
table td { 
    width: 65px; 
} 
table tr, 
table td { 
    width: 65px; 
    min-width: 65px; 
} 
#wrapper { 
    width: auto; 
    height: 850px; 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 
thead { 
    position: fixed; 
} 
tbody { 
    position: relative; 
} 

Так может кто-то указать мне в правильном направлении, как перенести первые 2 строки из-под заголовка? Дайте мне знать, если мне нужно объяснить больше или мне нужно добавить к моему вопросу!

Answer 1

Вот jsFiddle в рабочем порядке: http://jsfiddle.net/FyJwZ/7/

Эти изменения я сделал

/* this is what will do the trick */ 
tbody { 
    display: block; 
    padding-top: 21px; 
} 

thead { 
    z-index: 1; /* put on top of other rows */ 
} 

thead tr td { 
    background: #ddd; 
} 

/* only using !important to override your styles below */ 
td { 
    margin-left: 0 !important; 
    width: 100px !important; 
} 

UPDATE

Вот более полный пример: http://jsfiddle.net/kzuwR/14/

Answer 2

Вы установили thead{position:fixed}. Я никогда не использовал position:fixed в заголовке таблицы, но я предполагаю, что он привязывает его к верхней части кадра, как вы хотите. Проблема в том, что элементы фиксированной позиции не занимают никакого места на странице - вещи скользят прямо под ними. Вы должны это возместить, добавив margin-top к вашему tbody или, если это не сработает, до table tr:first-child.

Если это не сработает, я просто вставил бы правильный размер tr наверху и сделаю с ним.

Редактировать: На самом деле, играя со своей скрипкой, это не похоже на то, что заголовок таблицы фиксированной позиции правильно устанавливает ширину ваших строк в моем браузере. Какой браузер вы используете? Это, по-видимому, тип нетрадиционного CSS, который может вызывать проблемы с совместимостью между браузерами. (Таблицы, как правило, сложно так.)