Таблица CSS и максимальная ширина в Chrome не работают

Это мой код CSS;

#wrap {
    width:50em;
    max-width: 94%;
    margin: 0 auto;
    background-color:#fff;  
}

#head {
    width:50em;
    height:10em;
    max-width: 100%;
    margin: 0 auto;
    text-align:center;
    position: relative;
}

#css-table { 
    display: table; 
    margin: 1em auto;
    position: relative;
    width:50em;
    max-width: 100%;            
}

#css-table .col { 
    display: table-cell; 
    width: 20em;
    padding: 0px;
    margin: 0 auto;
}

#css-table .col:nth-child(even) { 
    background: #fff;
}

#css-table .col:nth-child(odd) { 
    background: #fff;
    border-right: 4px double #b5b5b5;
}

и мой HTML код;

<div id="cont">
    <div id="css-table">
        <div class="col">123</div>
        <div class="col">123</div>
    </div>
</div>

когда я масштабирую окно Firefox, таблица отлично масштабируется даже до 300px width viewport...как я и хотел. Но в Chrome таблица выглядит нормально только тогда, когда окно просмотра шире 50em. Если я сужу хромированное окно, стол кровоточит с правой стороны обертки.

есть ли причина, почему Chrome делает это?

11
css css-tables firefox google-chrome

4 ответов

создайте div и дайте ему стиль для отображения блока и максимальной ширины. Вы можете использовать традиционный <table> и дайте ему стиль 100% ширины.

5

технически Chrome следует правилам, потому что max-width должен применяться только к элементам блока.

из документов MSDN:

атрибуты min-width/max-width применяются к плавающему и абсолютно расположенного блока и инлайн-блочные элементы, а также некоторые внутренние контроли. Они не применяются к не заменяемым встроенным элементам, таким как строки таблицы и группы строк/столбцов. ("Замененный" элемент имеет внутренний размеры, такие как img или textArea.)

таблица (или в вашем случае дисплей:таблица) технически не должна работать или поддерживаться. FF, по-видимому, подчиняется ему отлично, но вам, вероятно, нужно будет придумать другое решение, либо удалив дисплей:таблица или Макс-ширина.

свойство max-width

MSDN Doc

16

решение, которое я нашел, использовало table-layout: fixed и width: 100%

5

я смог использовать mixin (SASS) для устранения проблемы.

 @mixin clearfix {
   &::after{
    content: "";
    display: table;
    clear: both;
   }
 }
0