Половина таблицы HTML прокручивается, а другие исправлены

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

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

 column1 column2 column3 column4 | column5 column6 column7 
------------------------------- |------------------------
                                |
//body and header are fixed     |  //only body and header can scroll  
//when scroll down              |  //horizontally, fixed while scroll 
                                |  //down

1. Я уверен, что есть способ достичь желаемого результата

2. да, я знаю, но я хочу знать любые коды, на которые я могу ссылаться, поскольку я понятия не имею, с чего начать…

Ответ №1:

Можете ли вы просто использовать две отдельные таблицы в отдельных разделах? Таким образом, вы можете легко сделать один div прокручиваемым, как хотите, а другой — с другим стилем прокрутки. Вы можете использовать overflow-y: scroll и overflow-x: scroll , чтобы сделать родительский div прокручиваемым.

Ответ №2:

Если вы разделите столбцы с помощью divs, цель проектирования может быть легко достигнута. Примените конкретные стили CSS, которые вы хотите.

Вы можете поместить заголовок прокручиваемого столбца в другой тег div / span и сделать его фиксированным.

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

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

Ответ №3:

CSS

    table {
        width: 100%;
    }

    thead, tbody, tr, td, th { display: block; }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;

        /*text-align: left;*/
    }

    tbody {
        height: 120px;
        overflow-y: auto;
    }

    thead {
        /* fallback */
    }


    tbody td, thead th {
        width: 19.2%;
        float: left;
    }

И HTML :

 <table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

</table>

На основе этого кода я создал скрипку

1. Нет, даже не соответствует ни одному требованию, которое я хочу.

2. Попробуйте эту ссылку jsfiddle.net/emn13/YMvk9 . я думаю, что это лучший пример для вас.

3. Да, это был мой первый пример, на который я ссылаюсь, я пытался изменить атрибут, но все еще не работает. Кстати, спасибо.