Как добавить горизонтальную полосу прокрутки для уль таблицы

Question

Я следующий код

HTML код

<section class="admin-dashboard-manage"> 
    <ul class="information-header">            
     <li>Title</li> 
     <li>Start Date</li>          
     <li>Start Time</li> 
     <li>End Time</li> 
     <li>Category Name</li>           
     <li>Location</li> 
    </ul> 

    <div class="information-data-body"> 
     <ul class="information-data"> 
      <li>Youth 5.5yr-12yr (Group) </li> 
      <li>2015-08-10</li> 
      <li>09:30:00</li> 
      <li></li> 
      <li>Unknown</li> 
      <li>Arena Sports @ Issaquah </li> 
      <li>Button</li> 
     </ul> 
     <ul class="information-data"> 
      <li>Youth 5.5yr-12yr (Group) </li> 
      <li>2015-08-10</li> 
      <li>09:30:00</li> 
      <li></li> 
      <li>Unknown</li> 
      <li>Arena Sports @ Issaquah </li> 
      <li>Button</li> 
     </ul> 
    </div> 
</section> 

CSS

.admin-dashboard-manage .information-header { 
    background: #0aa699 none repeat scroll 0 0; 
    color: #fff; 
} 

.admin-dashboard-manage .information-header > li, .admin-dashboard-manage .information-data > li { 
    display: inline-block; 
    line-height: 50px; 
    vertical-align: top; 
    width: 24%; 
} 

.information-data{ 
    border-bottom:1px solid #000;  
} 

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

Here is my Fiddle

Answer 1

переполнение-х: прокрутка; white-space: nowrap;

Вкл. Информационный заголовок.

Answer 2

Используйте display: inline, а не display:inline-block.

.admin-dashboard-manage .information-header > li, .admin-dashboard-manage .information-data > li { 
    display: inline; 
    ... 
} 

И тогда вы можете добавить соответствующий отступы, поля и т.д. Вы, вероятно, хотите только применить это к вашему .information-заголовка, так что вы не «сломаться» другие хорошие форматы у вас есть создано.

Edit 1:

Я пытался убедиться, что текст не будет переходить к следующей строке с «Nowrap» атрибута.

section { 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

section { 
    width: 100%; 
} 

Answer 3

Ответы, которые я получил, были достаточно близко, но столы закончились на полпути. Это было разрешено путем добавления display:inline-block; в головную часть. И добавил width:100%; для информации раздела.

updated fix