简报中的表格宽度CSS

时间:2013-06-04 20:59:17

标签: css html-table html-email

我遇到了列宽的问题,在尝试设置简报页面时,它们在CSS和HTML中被完全忽略。这是样式表:

h3 {
font-family:bitter;
font-weight:500;
font-size:14pt;
}

table {
border-collapse: collapse;
border:0px;
width: 700px;
table-layout: fixed;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
margin: 0;
text-align: justify;
line-height: 150%;
}

td {
font-family: arial;
font-size: 11pt;
padding: 1em;
font-weight: 600;
vertical-align: top;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;

}

这是表格:

<table>
<tr><td colspan="2"><img src="img.jpg" width="600" height="108"></td></tr>
<tr><td class="greybg" colspan="2">For those who ever wondered why such an exciting company had such a less-than-

exciting newsletter, we heard you. That is why we are proud to announce our new look and, more importantly, new tone to 

how we communicate with you. Take a few minutes to browse through our new features, such as grammar tips from our 

editors, profiles and helpful advice from one of our top authors, along with the latest news and innovations, including 

new videos and the recently launched Textbroker University, our exciting new program to help our 3-star authors become 

4 stars! With all the great things happening, there has never been a better time to be a part of Textbroker!</td></tr>
<tr>
<td class="orangebg" rowspan="3" style="width:70%;"><h3>CLASS IN SESSION!</h3>
If you have ever wondered how to become a 4-star author and earn more money at Textbroker, there is now Textbroker 

University! Our unique three-course curriculum was designed to correct the most common reasons authors are rated at 3 

stars. The process is easy. Just use the link to <a href="http://www2.textbroker.com/textbrokeruniversity">sign up 

here</a>. You get:
<br />• Expedited ratings of your five most recent articles 
<br />• Our three courses, including:   
<br />• Our blog on avoiding filler content
<br />• Our podcast and exercise on proofreading
<br />• Our video and exercise on commas
<br />• Once you finish, you can submit 10 articles for re-evaluation
<br />The course is free, and you can review the material as much as you want, so there’s no reason not to raise your 

rating--and start making more money. In addition to a higher per- word rate, 4-star authors also have access to more of 

our lucrative TeamOrders. These can provide a steady stream of work in specialty areas that pay more than the usual 4-

star rate! Don’t wait for the late bell. Sign up now!</td>

<td class="whitebg" style="width:30%;">
<h3>FUN FACT OF THE MONTH</h3>
Did you know that 4-star authors can earn 40 percent more than 3-star authors for an article of the same 

length? Sign up with Textbroker University, and let us show you how to be a 4-star author in no time!
<br />
</td>

</tr>

<tr><td class="dkgreybg" style="height:20px; width:30%;"></td></tr>

<tr>
<td class="whitebg" style="width:30%;"><h3>GETTING STARTED</h3>
Starting something new can be intimidating, and our system is no different. Now, we make the process easier 

with the latest in our series of videos available on Youtube. Please follow the link to our <a 

href="http://www.youtube.com/watch?v=NKpSVMx_1xk">New Author Registration</a> Video to help you get started! Feel free 

to share with your friends, so they can start writing for Textbroker too. More videos coming soon to help you get the 

most out of Textbroker!
</td>

</tr>


<tr><td class="greybg" colspan="2">
<h3>PROLIFIC AND PROFITABLE PROFILES</h3>
</td>

</table>

从内部来看,这是不起作用的列部分:

<td class="orangebg" rowspan="3" style="width:70%;"><h3>CLASS IN SESSION!</h3>
If you have ever wondered how to become a 4-star author and earn more money at Textbroker, there is now Textbroker 

University! Our unique three-course curriculum was designed to correct the most common reasons authors are rated at 3 

stars. The process is easy. Just use the link to <a href="http://www2.textbroker.com/textbrokeruniversity">sign up 

here</a>. You get:
<br />• Expedited ratings of your five most recent articles 
<br />• Our three courses, including:   
<br />• Our blog on avoiding filler content
<br />• Our podcast and exercise on proofreading
<br />• Our video and exercise on commas
<br />• Once you finish, you can submit 10 articles for re-evaluation
<br />The course is free, and you can review the material as much as you want, so there’s no reason not to raise your 

rating--and start making more money. In addition to a higher per- word rate, 4-star authors also have access to more of 

our lucrative TeamOrders. These can provide a steady stream of work in specialty areas that pay more than the usual 4-

star rate! Don’t wait for the late bell. Sign up now!</td>

<td class="whitebg" style="width:30%;">
<h3>FUN FACT OF THE MONTH</h3>
Did you know that 4-star authors can earn 40 percent more than 3-star authors for an article of the same 

length? Sign up with Textbroker University, and let us show you how to be a 4-star author in no time!
<br />
</td>

</tr>

<tr><td class="dkgreybg" style="height:20px; width:30%;"></td></tr>

<tr>
<td class="whitebg" style="width:30%;"><h3>GETTING STARTED</h3>
Starting something new can be intimidating, and our system is no different. Now, we make the process easier 

with the latest in our series of videos available on Youtube. Please follow the link to our <a 

href="http://www.youtube.com/watch?v=NKpSVMx_1xk">New Author Registration</a> Video to help you get started! Feel free 

to share with your friends, so they can start writing for Textbroker too. More videos coming soon to help you get the 

most out of Textbroker!
</td>

</tr>

Divs和Floats不是一个选项,因为这需要在电子邮件中。不知道为什么这不起作用。我在询问之前对此进行了大量研究,并在我的标题中添加了一些似乎可以解决问题的方法。我需要在whitebg类中指定宽度吗?我不想这样我以后可以使用任何宽度的列。

尝试摆弄宽度。我在Chrome中:http://jsfiddle.net/W29Ea/1/

0 个答案:

没有答案