Вторая таблица не соответствует ширине 600, кажется, она где-то перезаписана. Я думал, что если я напишу какой-либо тип встроенных стилей, он перезапишет все остальное. … Я в основном хочу, чтобы моя вторая таблица была того же размера, что и первая.
Я попытался просто добавить дополнительный
в первую таблицу и полностью исключить вторую таблицу, но это сделало одну td шире и раздавило другую в первой два тд
*****Это для электронной почты *****
Вот файл header.phtml :
<голова>
<название>название>
<тип стиля="текст/CSS">
/* Что он делает: Удаляет пробелы вокруг дизайна письма, добавленного некоторыми почтовыми клиентами. */
/* Осторожно: он может удалить отступы/поля и добавить цвет фона в окно создания ответа. */
HTML,
тело {
маржа: 0;
заполнение: 0;
высота: 100% !важно;
ширина: 100% !важно;
}
/* Что он делает: останавливает почтовые клиенты, изменяющие размер мелкого текста. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Что он делает: Заставляет Outlook.com отображать электронные письма на полную ширину. */
.Внешний класс {
ширина: 100%;
}
/* Что делает: запрещает Outlook добавлять дополнительные интервалы к таблицам. */
стол,
тд {
mso-таблица-lspace: 0pt;
mso-таблица-rspace: 0pt;
}
/* Что он делает: исправляет проблему заполнения webkit. */
стол {
интервал между границами: 0 !важно;
}
/* Что он делает: Фиксирует высоту строки Outlook.com. */
.
Внешний класс,
.Внешний класс * {
высота строки: 100%;
}
/* Что делает: Исправлена ошибка выравнивания таблицы почты Yahoo. */
стол {
граница коллапса: коллапс;
поле: 0 авто;
}
/* Что он делает: использует лучший метод рендеринга при изменении размера изображений в IE. */
картинка {
-ms-режим-интерполяции: бикубический;
}
/* Что он делает: переопределяет стили, добавленные, когда Yahoo автоматически распознает ссылку. */
.yshortcuts {
нижняя граница: нет !важно;
}
/* Что он делает: переопределяет синюю подчеркнутую ссылку, автоматически обнаруженную iOS Mail. */
/* Создайте класс для каждого необходимого стиля ссылки; этому шаблону нужен только один для ссылки в нижнем колонтитуле. */
.mobile-link -- нижний колонтитул {
цвет: #666666 !важно;
}
/* Что он делает: переопределяет стили добавленных изображений. */
картинка {
граница:0 !важно;
схема:нет !важно;
украшение текста: нет !важно;
}
Экран @media и (минимальная ширина устройства: 768 пикселей) {
/* Скрывает навигационное меню, кроме gmail */
*[класс].desktopСкрыть {
отображение: нет !важно;
}
}
/* Медиа-запросы */
Экран @media и (максимальная ширина устройства: 600 пикселей), экран и (максимальная ширина: 600 пикселей) {
/* Что он делает: переопределяет ширину рабочего стола контейнера электронной почты и принудительно задает 100% плавную ширину. */
.email-контейнер {
ширина: 100% !важно;
}
/* Скрывает навигационное меню, кроме gmail */
*[класс].mobileСкрыть {
отображение: нет !важно;
}
/* Что он делает: Заставляет изображения изменять размер до ширины их контейнера. */
изображение [класс = "жидкость"],
img[класс="жидкостный центр"] {
ширина: 100% !важно;
максимальная ширина: 100% !важно;
высота: авто !важно;
поле: авто !важно;
}
/* И выровняйте их по центру.
*/
img[класс="жидкостный центр"] {
поле: авто !важно;
}
/* Что он делает: Заставляет изображения изменять размер до ширины их контейнера. */
img[класс="столбец стека"],
img[класс="стек-столбец-центр"] {
ширина: 100% !важно;
максимальная ширина: 600 пикселей !важно;
высота: авто !важно;
поле: авто !важно;
}
img [класс = "половина столбца стека"],
img[class="stack-column-center-half"] {
ширина: 100% !важно;
максимальная ширина: 300px !важно;
высота: авто !важно;
поле: авто !важно;
}
img[класс="столбец стека-третий"],
img[class="стек-столбец-третий-центр"] {
ширина: 100% !важно;
максимальная ширина: 120 пикселей !важно;
высота: авто !важно;
поле: авто !важно;
}
/* Что он делает: Принудительно превращает ячейки таблицы в строки полной ширины.
*/
td[класс="столбец стека"],
td[class="столбец-стек-центр"] {
отображение: блок !важно;
ширина: 100% !важно;
направление: ltr !важно;
}
/* Что он делает: Принудительно превращает ячейки таблицы в строки полной ширины. */
td [класс = "половина столбца стека"],
td[class="stack-column-half-center"] {
отображение: встроенный блок !важно;
ширина: 50% !важно;
направление: ltr !важно;
}
td[класс="столбец стека-третий"],
td[class="стек-столбец-третий-центр"] {
отображение: встроенный блок !важно;
ширина: 32% !важно;
направление: ltr !важно;
}
/* И выровняйте их по центру. */
td[class="столбец-стек-центр"] {
выравнивание текста: по центру !важно;
}
/* Стили таблиц данных */
/* Что он делает: Скрывает заголовки таблиц */
td[класс="таблица данных-th"] {
отображение: нет !важно;
}
/* Что он делает: Скрывает заголовки таблиц */
td[класс="таблица данных-th"] {
отображение: нет !важно;
}
/* Что он делает: Изменяет внешний вид и расположение оставшихся td */
тд [класс = "данные-таблица-тд"],
td[класс="данные-таблица-td-название"] {
отображение: блок !важно;
ширина: 100% !важно;
граница: 0 !важно;
}
/* Что он делает: изменяет внешний вид первого td в каждой строке */
td[класс="данные-таблица-td-название"] {
вес шрифта: полужирный;
цвет: #000000;
отступ: 10px 0 0 0 !важно;
граница сверху: 2px сплошная #eeeeee !важно;
}
/* Что он делает: изменяет внешний вид других td в каждой строке */
тд[класс="данные-таблица-тд"] {
отступ: 5px 0 0 0 !важно
}
/* Что он делает: Обеспечивает визуальный разделитель между строками таблицы.
В этом случае немного лишнего места. */
td[class="data-table-mobile-divider"] {
отображение: блок !важно;
высота: 20 пикселей;
}
/* END Стили таблиц данных */
}
стиль>
голова>
У меня есть таблица элементов, которая выглядит так
Как видите, таблица не занимает всю ширину экрана (ширина этого изображения равна ширине экрана, это приложение разрабатывается для мобильных устройств)
HTML-код, созданный для отображения это выглядит так:
Я не стал включать стили, которые окрашивают шрифты. Единственная причина, по которой изображение даже такое широкое, заключается в том, что я установил минимальную ширину 320 пикселей, а затем сделал последнее изображение плавающим вправо.
Установка минимальной ширины на 100% не работает . Я в своем уме здесь, и я был бы очень признателен за помощь, если кто-нибудь может ее одолжить.
HTML
CSS
1
Вам нужно width='100%' встроенный стиль. ДЕМО
Стол шириной 100 %:
<таблица bgcolor='красный'>
<тд>11тд>
12
<тд>13тд>
14
<тд>21тд>
22
<тд>23тд>
<тд>24тд>
<тд>31тд>
<тд>32тд>
<тд>33тд>
<тд>34тд>
таблица>
Fiddle DEMO: http://jsfiddle. net/xeemez/WJJBX/
В качестве альтернативы вы можете использовать CSS вместо встроенных тегов, например:
table{
фон:красный;
ширина:100%; }
DEMO
если у вас есть попытка дать
ИЛИ вы делаете class table{width:100%;} обе работы