100 table width: CSS to make table 100% of max-width

css — html таблицы 100% ширина

Действительно глупый вопрос, но я не могу заставить его работать так, как хочу… больше не занимаюсь html. Вот что я получил:

 
Информация о доставке: Способ доставки:
{{var order.getShippingAddress().format('html')}}     {{var order.getShippingDescription()}}  

Вторая таблица не соответствует ширине 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 Стили таблиц данных */ }
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}

{{var order.getEmailCustomerNote()}}

<тд> <дел>
Покупайте новинки прямо сейчас!
<тд> Просмотр в браузере <тд>
 
website.com/?email=#Listrak\Email#" title="website.com">сайт Stone
 
<тд>
<тд>
<тд>
<тд> website.com/6385/Shared/sca/spacer.gif" border="0">

html — Таблица не занимает 100% ширины экрана

Задать вопрос

спросил

Изменено 9 лет, 4 месяца назад

Просмотрено 7к раз

У меня есть таблица элементов, которая выглядит так

Как видите, таблица не занимает всю ширину экрана (ширина этого изображения равна ширине экрана, это приложение разрабатывается для мобильных устройств)

HTML-код, созданный для отображения это выглядит так:

 <таблица>
    
<тд> <диапазон> <дел> <дел>
8 383 рублей
<дел> ./resources/img/icon_circle_footer.png"> Эмирейтс <дел> <дел> <дел> 13:30 – 07:00
18 ч 30 м, 1 остановка
<дел> <дел> 14:25 – 16:25
25ч 0м, 1 остановка
<дел >

Я не стал включать стили, которые окрашивают шрифты. Единственная причина, по которой изображение даже такое широкое, заключается в том, что я установил минимальную ширину 320 пикселей, а затем сделал последнее изображение плавающим вправо.

Установка минимальной ширины на 100% не работает . Я в своем уме здесь, и я был бы очень признателен за помощь, если кто-нибудь может ее одолжить.

  • HTML
  • CSS

1

Вам нужно width='100%' встроенный стиль. ДЕМО

Стол шириной 100 %:

 <таблица bgcolor='красный'>
    
<тд>11 <тд>13 <тд>21 <тд>23 <тд>24 <тд>31 <тд>32 <тд>33 <тд>34

Fiddle DEMO: http://jsfiddle. net/xeemez/WJJBX/

В качестве альтернативы вы можете использовать CSS вместо встроенных тегов, например:

 table{
    фон:красный;
    ширина:100%; }
 

DEMO

если у вас есть попытка дать

12 14
22

ИЛИ вы делаете class table{width:100%;} обе работы

HTML

 <тд> <диапазон> <дел> <дел>
8 383 рублей
<дел> Эмирейтс <дел> <дел> <дел> 13:30 – 07:00
18 ч 30 м, 1 остановка
<дел> <дел> 14:25 – 16:25
25ч 0м, 1 остановка
<дел >

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *