Как исправить заголовок таблицы?

Question

Как исправить заголовок таблицы?

0

Как получить заголовок таблицы, фиксированной, когда данные таблицы прокручиваются через jquery! высота фиксированной таблицы

<html>
 <body>
  <style type="text/css">
   <table class="fx">
    <tbody>
      <tr>
       <th>Email ID</th>
       <th>Time Taken to complete game (secs)</th>
       <th>Email ID</th><th>Time Taken to complete game (secs)</th>
      </tr>
    </tbody>
   </table>
 </div>
 <table class="data">
  <tbody>
   <tr>
    <td>[email protected]</td>
    <td>449</td>
    <td>[email protected]</td>
    <td>449</td>
   </tr>
   <tr>
   <tr>
    <td>[email protected]</td>
    <td>449</td><td>[email protected]</td>
    <td>449</td>
   </tr>
   <tr>
    <tr>
     <td>[email protected]</td>
     <td>449</td>
     <td>[email protected]</td>
     <td>449</td>
    </tr>
     <tr> 
   </tr>
  </tbody>
 </table>

    table tbody
    {
       display: block;
    height: 262px;
    overflow: auto;
          }
      table {
    table-layout: fixed;
    height: 100px;
    overflow: auto;
    padding: 10px;
    }
    table tr{
        background-color: #F5F5F5;
    }
    table tr:nth-child(odd){

        background-color: #eee;
    }
    table tr:nth-child(even){

        background-color: #F5F5F5;
    }
    table tr td{
        padding:10px;
        width: 200px; 
         max-width: 200px;
        word-wrap:break-word;
        height: auto;
        text-align: center;
        color:#5d8d5d;
    }
    .fx{
         position: fixed;
      top: 0;

      left: 0;
      }

      .fx tr th {
        padding:10px;
        background-color: #ddd;
        width: 200px;
        color:#6d4d9d;
        text-align: center;

    }

    .data{
      margin-top: 70px;
    }

    div{
      position: relative;

    }
    *{
      margin: 0;
      padding: 0;
    }

    </style>
    <div>



    </body>
    </html>

Как получить заголовок таблицы, фиксированной, когда данные таблицы прокручиваются через jquery! высота стола необходимо срочно

suraj rawat 19 дек. 2013, в 11:51

Источник

0

Посмотрите здесь: stackoverflow.com/questions/4709390/…
pschueller 19 дек. 2013, в 10:35
0

нужно срочно плохо пахнет , это показывает, что ваш босс собирается вас шлепнуть ... в любом случае, ваша таблица, кажется, имеет фиксированную width поэтому вы можете попробовать это stackoverflow.com/a/17828082/1542290 .. кстати, это PURE CSS
Mr. Alien 19 дек. 2013, в 10:36
0

хаха правильный босс собирается надрать мне задницу, если не сделаешь :)
suraj rawat 19 дек. 2013, в 10:37
0

да видите .. вот вы ...
Mr. Alien 19 дек. 2013, в 10:37
1

Почему ваша разметка table находится в теге style ? Кроме того, там есть дополнительный </div> .
melancia 19 дек. 2013, в 11:05

Показать ещё 3 комментария

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Посмотрите здесь: stackoverflow.com/questions/4709390/…
нужно срочно плохо пахнет , это показывает, что ваш босс собирается вас шлепнуть ... в любом случае, ваша таблица, кажется, имеет фиксированную width поэтому вы можете попробовать это stackoverflow.com/a/17828082/1542290 .. кстати, это PURE CSS
хаха правильный босс собирается надрать мне задницу, если не сделаешь :)
Почему ваша разметка table находится в теге style ? Кроме того, там есть дополнительный </div> .

Vishal Patel · Answer 1 · 2014-01-09T13-09-00.000Z

Смотрите эту ссылку

ИЛИ

Не могли бы вы попробовать это...

Стиль CSS:

<style>
        table tbody
    {
        display: block;
        height: 262px;
        overflow: auto;
    }
    table
    {
        table-layout: fixed;
        height: 100px;
        overflow: auto;
        padding: 0px;
    }
    table tr
    {
        background-color: #F5F5F5;
    }
    table tr:nth-child(odd)
    {
        background-color: #eee;
    }
    table tr:nth-child(even)
    {
        background-color: #F5F5F5;
    }
    table tr td
    {
        padding: 0px;
        width: 200px;
        max-width: 200px;
        word-wrap: break-word;
        height: auto;
        text-align: center;
        color: #5d8d5d;
    }
    .fx
    {
        position: fixed;
        top: 0;
        left: 0;
       min-width:850px;
       width:850px;
    }

    .fx tr th
    {
        padding: 10px;
        background-color: #ddd;
        width: 175px;
        min-width: 175px;
        color: #6d4d9d;
        text-align: center;
    }

    .data
    {
        margin-top: 0px;
        min-width:850px;
        width:850px;
        left: 0;
    }
    .data tr th
    {
        padding: 10px;
        width: 175px;
        min-width: 175px;
        text-align: center;
    }

    div
    {
        position: relative;
    }
    *
    {
        margin: 0;
        padding: 0;
    }
    </style>

HTML:

<table class="fx">
        <tbody>
            <tr>
                <th>
                    Email ID
                </th>
                <th>
                    Time Taken to complete game (secs)
                </th>
                <th>
                    Email ID
                </th>
                <th>
                    Time Taken to complete game (secs)
                </th>
            </tr>
        </tbody>
    </table>
    <div id="data" style="valign: top; overflow: auto; min-width:850px; height: 100px; margin-top: 60px;
        padding-top: 0px">
        <table class="data">
            <tbody>
                <tr>
                    <th>
                        [email protected]
                    </th>
                    <th>
                        449
                    </th>
                    <th>
                        [email protected]
                    </th>
                    <th>
                        449
                    </th>
                </tr>
                <tr>
                    <tr>
                        <th>
                            [email protected]
                        </th>
                        <th>
                            449
                        </th>
                        <th>
                            [email protected]
                        </th>
                        <th>
                            449
                        </th>
                    </tr>
                    <tr>
                        <tr>
                            <th>
                                [email protected]
                            </th>
                            <th>
                                449
                            </th>
                            <th>
                                [email protected]
                            </th>
                            <th>
                                449
                            </th>
                        </tr>
                        <tr>
                        </tr>
            </tbody>
        </table>
    </div>

@ user3011961 Пожалуйста, дайте мне знать, если он не работает для вас ...
@ user3011961 У вас есть возможность проверить это?
Он работает не так, как ожидалось, извините, но на самом деле, благодаря этому вы можете не выравнивать строки столбцов в td по отношению к строкам заголовков, которые они раздвигают!
@ user3011961 Но функция, которая вам нужна (придерживаться заголовка и просто перемещать записи) выполняется или нет? если это выполнено тогда, я могу выровнять строки записи со строкой столбцов заголовка.
да частично, но я хочу выровненные строки col, спасибо заранее
@ user3011961 Не могли бы вы попробовать обновить ...
прямые линии сечения тд отходят от линии сечения (границы)
@ user3011961 Ты тратишь мое время. Я думаю, что вам нужно выучить HTML и CSS из базовых. потому что после такой большой помощи ты ничего не сможешь сделать со своей стороны.
Прежде всего, мой друг, если ты хочешь получить очки здесь, тогда давай правильные решения. Во-вторых, никто не попросит тебя прийти сюда и помочь, поэтому не идиотские оправдания!
@ user3011961 Я не хочу очков. Мы здесь, чтобы улучшить мои знания, но ваши требования присутствуют в каждом сообщении. Вам нужен прокручиваемый элемент с липким заголовком. Я дал вам это, но теперь ваше требование изменилось. :)
@ user3011961 Вы должны приложить некоторые усилия и с вашей стороны.
Спасибо за мягкий ответ, и извините, если вопрос изменился, возможно, вы правы, спасибо за ваше время!
@ user3011961 Я не хочу тратить больше моего и вашего времени.