CSS to make table 100 of max-width

Question

Given the following for an email template    lt style gt     import url  http   fonts googleapis com css family Open Sans     lt  style gt    lt div style  width 100   background  F2F2F2  gt     lt table style  padding  25px  margin  0 auto  font-family  Open Sans    Helvetica    Arial    gt       lt tr align  center  style  margin  0  padding  0   gt         lt td gt           lt table style  border-style solid  border-width 2px  border-color   c3d2d9   cellspacing  0  gt             lt tr style  background-color  white   gt               lt td style  width  700px  padding  10px 15px 10px 15px  color   000000   gt                 lt p gt Some content here lt  p gt                 lt span style  font-weight  bold   gt My Signature lt  span gt  lt br  gt                My Title lt br  gt                My Company lt br  gt               lt  td gt             lt  tr gt           lt  table gt         lt  td gt       lt  tr gt     lt  table gt   lt  div gt    The table will be exactly 700px wide is what is needed  However  because its entirely fixed width  it can t resize on devices with less than 700px width  But if I modify the td element to this    lt td style  max-width  700px  width  90   padding  10px 15px 10px 15px  color   000000   gt      lt p gt Some content here lt  p gt      lt span style  font-weight  bold   gt My Signature lt  span gt  lt br  gt     My Title lt br  gt     My Company lt br  gt   lt  td gt    Then the table is only  100px wide   How would I reorder the CSS to make it so that the table is 700px but resizes as the viewport grows smaller

User · Answer

I had the same issue it was due to that I had the bootstrap class "hidden-lg" on the table which caused it to stupidly become display: block !important;

I wonder how Bootstrap never considered to just instead do this:

@media (min-width: 1200px) {
    .hidden-lg {
         display: none;
    }
}

And then just leave the element whatever display it had before for other screensizes.. Perhaps it is too advanced for them to figure out..

Anyway so:

table {
    display: table; /* check so these really applies */
    width: 100%;
}

should work

User · Answer

Use this     lt div style  width 700px  background  F2F2F2  gt       lt table style  width 100  padding  25px  margin  0 auto  font-family  Open Sans    Helvetica    Arial    gt           lt tr align  center  style  margin  0  padding  0   gt               lt td gt                   lt table style  width 100  border-style solid  border-width 2px  border-color   c3d2d9   cellspacing  0  gt                       lt tr style  background-color  white   gt                           lt td style   padding  10px 15px 10px 15px  color   000000   gt                               lt p gt Some content here lt  p gt                               lt span style  font-weight  bold   gt My Signature lt  span gt  lt br  gt                              My Title lt br  gt                              My Company lt br  gt                           lt  td gt                       lt  tr gt                   lt  table gt               lt  td gt           lt  tr gt       lt  table gt   lt  div gt

User · Answer

max-width is definitely not well supported  If you re going to use it  use it in a media query in your style tag  ios  android  and windows phone default mail all support them   gmail and outlook mobile don t   http   www campaignmonitor com guides mobile targeting   Look at the starbucks example at the bottom

User · Answer

I have a very well working solution for tables of max-width  100   Just use word-break  break-all  for the table cells  except heading cells  to break all long text into several lines    lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt   table     max-width  100      table td     word-break  break-all      lt  style gt   lt  head gt   lt body gt    lt table border  1  gt     lt tr gt       lt th gt  lt strong gt Input lt  strong gt  lt  th gt       lt th gt  lt strong gt Output lt  strong gt  lt  th gt     lt  tr gt     lt tr gt       lt td gt some text lt  td gt       lt td gt 12b6459fc6b4cabb4b1990be1a78e4dc5fa79c3a0fe9aa9f0386d673cfb762171a4aaa363b8dac4c33e0ad23e4830888 lt  td gt     lt  tr gt   lt  table gt    lt  body gt   lt  html gt    This will render like this  when the screen width is limited

User · Answer

You need to use       table          width 100           table-layout  fixed          overflow-wrap  break-word          Demo

User · Answer

I had to use   table  tbody       width  100       The table alone wasn t enough  the tbody was also needed for it to work for me

User · Answer

Like this  demo  css  table      width 100

[css] CSS to make table 100% of max-width

Examples related to css

Examples related to html-table

Examples related to width

Examples related to html-email