HTML Email TD的堆叠

Question

我正在尝试创建带有表格的HTML电子邮件，从我一直在阅读的内容来看，我的TD，TR和TABLE的{ 1}}以便工作，响应等。但是，当我将单元格放入文档中时，它们会堆叠而不是线性出现。

抱歉，太长了。我一直在尝试不同的解决方案，以尝试使此“响应”功能适用于此电子邮件，但我有些困惑。

display:block

  /* Basics */
body {
    Margin: 0 !important;
    padding: 0;
    background-color: #ffffff;
}
table {
    border-spacing: 0;
}
td {
    padding: 0;
}
img {
    border: 0;
}
div[style*="margin: 16px 0"] { 
    Margin:0 !important;
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
    Margin: 0 auto;
}

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}

/* Y! and Outlook bg image fix */
tr[class=GradeHead] {
width: 100% !important;
height: 198px;
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/5827ac1b-050b-4752-9f9f-728e05e3170b.png');
background-repeat: no-repeat !important;
background-position: 0px 6px !important;
background-size:cover;
}

tr .g-row{
width: 100% !important;
height: auto;
background-repeat: no-repeat !important;
background-size:cover;
background-position: -2px center !important;
display:table-row;
}

tr .g-row-2{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}

tr .g-row-3{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/573b935e-64d4-43d4-b29c-aa3cc0661dbf.png');
}

tr .g-row-4{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}

td[class=option] {
width: 300px !important;
height: auto !important;
display: table-cell;
}

td[class=cover] {
background-repeat: no-repeat !important;
background-position: center !important;
width: 100% !important;
height: auto;
}

td .boys {
background-image: url('img/row-1-bubbles.png') !important;
}

td .ship {
background-image: url('img/row-2-ship.png') !important;
}

td .resort {
background-image: url('img/row-3-resort.png') !important;
}
/* iphone X Media call */
  @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3)
    and (device-pixel-ratio : 3) { }
    
/* iphone 7,8 Media call */
	@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2)
    and (device-pixel-ratio : 2) { }
    
/* iphone 6 Plus, 6S Plus, 7 Plus, 8 Plus Media call */
	@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3)
	and (device-pixel-ratio : 3) { }

		body{
			background-color:#fff;
		}
		*{
			font-family:Futura,Helvetica,Arial,sans-serif;
		}
		p{
			color:#929292;
			font-size:18px;
		}
		.plus{
			font-size:2em;
			padding:20px 10px;
			border-radius:30px;
		}
		a{
			text-decoration:none;
			color:inherit;
		}
		#footer a{
			text-decoration:underline;
		}
		#footer p{
			color:#c5b9ac;
			font-size:12px;
		}
		.btn-pink{
			color:#fff;
			background-color:#fa0375;
			display:block;
			padding:15px 5px;
			border-radius:30px;
			font-size:22px;
			text-align:center;
		}
		.btn-white{
			color:#fff;
			border:2px solid #fff;
			font-size:18px;
			display:block;
			margin:10px 25px;
			padding:10px 15px;
			text-align:center;
			text-transform:uppercase;
			border-radius:30px;
		}
		.btn-purp{
			color:#fff;
			background-color:#69034c;
			display:block;
			padding:15px 5px;
			border-radius:30px;
			font-size:20px;
			text-align:center;
			margin:25px 70px;
		}
		h3{
			color:#fff;
			font-size:21px;
			font-weight:normal;
		}
		table,tr,td{
			border:none;
			border-collapse:collapse;
			padding:0;
			border-color:rgba(0,0,0,0);
			border-style:none;
			overflow:hidden;
		}
		td h3,td p{
			margin:10px;
		}