table width doesn't work on multiple row

Question

Just sick, tried to debug this for an hour. Why the table is stretch by the content? I have wrap the layout properly with tr and td . I'm designing html for emails.

why the width:600px doesn't work on the table?

Answer 1

add table-layout: fixed;
Please see http://jsfiddle.net/qse5owx6/5/

Answer 2

see here jsfiddle

well this happens because you've set specific fixed widths ( in pixels ) to all the elements , that's why you can't force the table to a smaller width.

i suggest you use percentages as widths for the elements inside the table. for example

tbody { width:100%;}
tr { width:100%;}
td { width:50%;}

OR if you want to keep the widths of the elements fixed (873px) you could wrap all the table inside a div like .wrapper and add

.wrapper {
  width:600px;
  overflow:auto;
}

see here : jsfiddle

Answer 3

I did some research to create email templates.

I hope this will help you in this.

The steps to create email templates are:

Create the email template as per the guidelines of article
Once the template is ready, transfer all CSS from css files to <style> in <head>
Make all the CSS inline using service
To check which tag and CSS elements are valid for email client, please check link

table width doesn't work on multiple row

Question

3 answers

solution1
0 2016-07-13 08:39:23

solution2
0 2016-07-13 08:50:02

solution3
0 2016-07-13 10:15:51

table width doesn't work on multiple row

Question

3 answers

solution1 0 2016-07-13 08:39:23

solution2 0 2016-07-13 08:50:02

solution3 0 2016-07-13 10:15:51

solution1
0 2016-07-13 08:39:23

solution2
0 2016-07-13 08:50:02

solution3
0 2016-07-13 10:15:51