it-swarm.com.ru

HTML-таблица с фиксированным заголовком столбца и строки без JS

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

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

После нескольких исследований я увидел, что на этот вопрос уже был дан ответ с использованием самодельных JS-скриптов jQuery. Я хотел бы избежать этого, используя <div>containers.

Моя стратегия состоит в том, чтобы иметь глобальный контейнер с двумя дочерними элементами:

  • Левый, содержащий столбец заголовка
  • Правый, содержащий строку заголовка и таблицу

Это позволило бы мне прокручивать по горизонтали, не перемещая столбец заголовка, и прокручивать по вертикали, не перемещая строку заголовка (по некоторым позициям absolute внутри его родителей, я полагаю?).

Моя главная проблема в том, что я не могу понять, как отобразить эти два основных элемента рядом друг с другом. Действительно, если я использую свойство CSS float, у меня не будет переполнения при прокрутке.

Вот и я, требуя немного вашего времени, чтобы помочь мне расположить эти два элемента, не мешая прокрутке.

Здесь вы найдете HTML-часть кода: Номер Fooname Barname Barfoo Зорзоре Lorname Ipsname

    <div class="right">
        <table>
            <thead>
                <th>8-10</th>
                <th>10-12</th>
                <th>12-14</th>
                <th>14-16</th>
                <th>16-18</th>
                <th>18-20</th>
            </thead>

            <tbody>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
            </tr>
            <tr>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell booked">Already booked</td>
                <td class="cell available">Available for booking</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

CSS:

.table-container {
    position: relative;
    width: 600px;
    height: 100%;
    border: 2px solid red;
    display: inline-block;
}

th {
    border: 1px solid black;
    padding: 10px;
}

td {
    border: 1px solid black;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
}

.right {
    overflow: auto;
}

Когда я пишу это, предварительный просмотр не отображает первые элементы моего кода как ... код, но интерпретирует его как html. Так что здесь вы найдете полный код + рендеринг: DEMO

7
Thibault Martin

Самый простой способ - добавить этот CSS:

table {
    float: left;
}

И это будет работать так, как вы хотите. 

Пример

5
Morpheus

Попробуйте это Fiddle

CSS:

.right {
    overflow: auto;
    position: absolute;
    top: 0px;
    left: 134px;
    width: 73%;

}
0
Manoj