无法更改表格<TD>的宽度
无法更改表格<TD>的宽度
提问于 2017-07-29 01:35:34
蓝色的表数据条目将不会保留其宽度。有没有一种新的html5方法能够实现这一壮举？行的宽度应该与上面的照片相同。
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-29 01:50:27
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
我会做这样的事情。没有用于布局的表格。如果它必须是内联的，只需将一个<style></style>标记放在HTML块的上方。
Stack Overflow用户
发布于 2017-07-29 01:56:01
对于按钮的背景颜色，我使用了以下网站。
我还将所有内容分成css和html，这样你就可以看到了。没有内联CSS。这是正确的使用表和标题的方法。
对标题使用<div>标记，因为它会自动将内容推到后面的新行。不需要使用中断标记。在设计中很少再使用break标记。
此外，我还确保您的分隔线是蓝色的。
我相信在没有表格的情况下有更好的方法来实现这一点，但是你说你需要表格形式的表格，所以就这样吧！
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<a href="#"><button>Search Sitters</button></a>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
Stack Overflow用户
发布于 2017-07-29 01:46:57
您正在使用内联css，请尝试如下所示：
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45379358
复制相关文章
相似问题
腾讯云开发者
