Как положить таблицу в поле

Question

Я делаю сайт только для обучения css других шаблонов, и я делаю таблицу с 8 атрибутами.

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

Я думаю, что мне просто нужно что-то сделать в tablesorter, но я не уверен, что.

#este .tablesorter { 
    width: inherit; 
    margin: -5px 0 0 0; 
} 

#este .tablesorter td{ 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px dotted #ccc; 
} 

#este .tablesorter thead tr { 
    height: 34px; 
    background: url(../images/table_sorter_header.png) repeat-x; 
    text-align: left; 
    text-indent: 10px; 
    cursor: pointer; 
} 

#este .tablesorter input[type=image] { 
    margin-right: 10px; 
} 

#este table.tablesorter thead tr .headerSortDown, 
#este table.tablesorter thead tr .headerSortUp { 
    background-color: #8dbdd8; 
} 

Код здесь: https://jsfiddle.net/3gnhfLLt/

Answer 1

Ваши заголовки таблиц <th> просто долго. У вас есть 3 варианта:

1. Используйте прокрутку в направлении х:

   .module_content { 
       overflow-x: auto; 
   } 
   

2. Используйте не более ширины на ячейки таблицы с break-word:

   th { 
       max-width: 30px; 
       word-wrap: break-word; 
   } 
   

3. Make заголовка таблицы ячеек содержание меньше

Answer 2

Поместите overflow-x: auto в module_content класс и там вы идете!

.module_content { 
    margin: 10px 20px; 
    color: #666; 
    overflow-x: auto; 
} 

Answer 3

Добавить это в CSS и, безусловно, работать

.module_content{ 
    overflow-x:auto; 
    width:auto; 
} 

JSfiddle

Answer 4

Попробуйте

#este .tablesorter {table-layout:fixed; width:100%;} 

#este .tablesorter td, #este .tablesorter th{ word-wrap: break-word;} 

Demo