Таблица Html с фиксированным столбцом заголовка и строкой без JS

Question

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

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

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

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

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

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

Моя основная проблема: я не могу понять, как отображать эти два основных элемента рядом друг с другом. Действительно, если я использую свойство 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

Answer 1

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

table { 
    float: left; 
} 

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

Example

Answer 2

Попробуйте Fiddle

CSS:

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

}