Как исправить строку заголовка таблицы (с горизонтальными и вертикальными скроллерами)? - PullRequest
Новая
       11

Как исправить строку заголовка таблицы (с горизонтальными и вертикальными скроллерами)?

1 голос
/ 14 апреля 2010

У меня есть этот образец таблица , и я хочу сделать строку заголовка таблицы видимой все время. Строка заголовка должна прокручиваться с горизонтальной полосой прокрутки и не должна прокручиваться с вертикальной полосой прокрутки.

таблица: 

<div style="width:800px; height:150px;overflow:scroll;margin:50px auto;">
<table style="width:1600px" border="1">
    <thead style="">
      <tr>
        <th style="width:800px">id_1</th>
        <th style="width:800px">id_2</th>
      </tr>
    </thead>
    <tbody style="">
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

Как я могу сделать это только с css? Предложения в этом и этом потоке, похоже, не работают, возможно, из-за наличия полос прокрутки.

EDIT

Я ищу решение css. Структура и расположение таблицы не могут быть изменены. Кроме этого нет никаких ограничений на HTML.

Ответы [ 3 ]

1 голос
/ 22 августа 2012

Это решение не требует каких-либо div. Просто CSS и несколько строк Jquery. 

<!DOCTYPE html>
<html>
 <head>
     <title></title>
</head>
<body>
   <table id="mytable">
        <thead class="fixedHeader">
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>                   
            </tr>
        </thead>
        <tbody class="scrollContent">
            <tr>
                <td><td>
                <td><td>
                <td><td>
                <td><td>
                <td><td>                    
            <tr>
        </tbody>
   </table>
 </body>
<html>

// CSS 

 #mytable{
  position: absolute;
  top:3.2em;
 }
 #mytable thead.fixedHeader tr{
  width:100%;
  height:2.3em;
  position: fixed;
  display: block; 
  /*The background to be replaced by your own pix or color*/    
  background: url('img/bluegrad.png') 0 0 repeat-x;
  top:4.3em;
 } 
 #mytable tbody.scrollContent {
  width: 100%; 
 }

//JQuery
 $(function(){
      //get all th from the table
  //get all td from the table
  //td number has to be equal th number to avoid trouble
  var ths = $('table#my_table tr:nth-child(1) th');
  var tds = $('table#my_table tr:nth-child(2) td');

     $(tds).each(function(idx){
      //for each td get width 
  //and pass to corresponding th
  var w = $(this).width();
   $(ths).eq(idx).width(w);
     });
 })
0 голосов
/ 15 апреля 2010

Попробуйте, используя 2 деления 

<div style="width:800px; margin:0 0 0 0;">
<table  width="800" border="1" cellpadding="3">
    <thead style="">
      <tr>
        <th style="width:400px">id_11</th>
        <th style="width:400px">id_2</th>
      </tr>
    </thead>
</table>
</div>
<div style="width:820px; height:150px;overflow:scroll;margin:0 0 0 0; overflow-x: hidden;">
<table  width="800" border="1" cellpadding="3">
    <tbody style="">
      <tr><td style="width:400px">1200</td><td style="width:400px">1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
      <tr><td>1200</td><td>1200</td></tr>
    </tbody>
</table>
</div>

альтернативный текст http://img204.imageshack.us/img204/4431/tablenj.jpg

0 голосов
/ 14 апреля 2010

Вы можете использовать CSS position:fixed в сочетании с некоторыми другими свойствами для достижения этой цели.

См. Это для получения дополнительной информации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...