Выровнять столбцы таблицы HTML

Question

Наконец, я смог выровнять столбцы в таблицах страницы моего сайта. Хотя я нашел решение, я этого не понимаю. Это fiddle Я подготовил. Если вы удалите

display: block 

из CSS колонны центрированы отлично.

Дело в том, что я не понимаю, что эта инструкция вызывает проблемы, не означает ли это, что elements are displayed as block elements? Разве это не должно заставлять элементы (в частности, сырые) заполнять всю линию?

Answer 1

Ширина ваших таблиц автоматически устанавливается в соответствии с ее содержимым (а не полной шириной страницы), поэтому при добавлении display:block; она заполняет эту конкретную ширину.

Если указать ширину таблицы, чтобы быть в ширину DIV (который устанавливается по ширине страницы), вы увидите ожидаемый результат:

table{ 
    width: 100%; 
} 
.books tr{ 
    display: block; 
    padding-bottom: 20px; 
} 

Answer 2

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

Я добавил дополнительную границу, чтобы увидеть таблицу:

http://cssdeck.com/labs/ays6idqs

table { width: 100%; border: 1px solid red; } 

Answer 3

Я немного запутался в таблицах себя, но я сделаю все возможное, чтобы объяснить.

Причина, по которой display: block; разрушает выравнивание ваших колонок потому, что вы заменяемое по умолчанию display: table-row;, который используется в тандеме с <td> значением display: table-cell: создать структуру таблицы.

При создании таблицы лучше всего определить общую ширину таблицы, а затем объявить часть каждого столбца с атрибутом width в вашем HTML.

Так,

HTML:

<td width='50%'> 

CSS:

.books table { 
    width:100%; /* or whatever your desired width is */ 
} 
.books tr{ 
    padding-bottom: 20px; 
} 

.books td{ 
    text-align: center; 
    padding-bottom: 5px; 
    font-size: 12pt; 
    position: relative; 
} 

Вместо,

HTML:

<td> 

CSS:

.books tr{ 
    padding-bottom: 20px; 
} 

.books td{ 
    width: 30%; 
    text-align: center; 
    padding-bottom: 5px; 
    font-size: 12pt; 
    position: relative; 
}