我要实现div相对td定位。设置td的position为relative后，td的border设置失效，是啥原因？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我要实现div相对td定位。设置td的position为relative后，td的border设置失效，是啥原因？相关的知识，希望对你有一定的参考价值。
代码如下：
<html>
<head>
<title>demo</title>
</head>
<body>
<div
style="position: absolute; width: 716px; z-index: 1; left: 20px; top: 20px">
<table cellpadding="0" cellspacing="0"
style="table-layout: fixed; border-collapse: collapse; border: none;">
<tr height='91'>
<td align='left' valign='top' colspan='358' rowspan='1' width='358'
style="position: relative; display: block; border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;">
<div
style="position: absolute; width: 70px; height: 21px; z-index: 1; left: 133px; top: 32px"><input
type="button" id='null' value='按钮1' x='133' y='32'
style='width: 70; height: 21'></input></div>
</td>
<td align='left' valign='top' colspan='358' rowspan='1' width='358'
style="position: relative; display: block; border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;">
<div
style="position: absolute; width: 70px; height: 21px; z-index: 1; left: 130px; top: 32px"><input
type="button" id='null' value='按钮2' x='130' y='32'
style='width: 70; height: 21'></input></div>
</td>
</tr>
<tr height='91'>
<td align='left' valign='top' colspan='358' rowspan='1' width='358'
style="position: relative; display: block; border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;">
<div
style="position: absolute; width: 70px; height: 21px; z-index: 1; left: 130px; top: 35px"><input
type="button" id='null' value='按钮3' x='130' y='35'
style='width: 70; height: 21'></input></div>
</td>
<td align='left' valign='top' colspan='358' rowspan='1' width='358'
style="border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;"></td>
</tr>
</table>
</div>
</body>
</html>
中间那些border-left: 1px solid black; border-right: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;都失效了
不知道你要的是不是这个效果，原因是 你的div的position为绝对定位的问题.
<html>
<head>
<title>demo</title>
<style type="text/css">
#div1
position: absolute;
width: 716px;
z-index: 1;
left: 20px;
top: 20px;
#div1 table
table-layout: fixed;
border-collapse: collapse;
border: none;
#div1 table tr
height: 91px;
#div1 table td
display: block;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 358px;
.div2
position: relative;
width: 70px;
height: 21px;
z-index: 1;
left: 130px;
top: 35px;
.div2 input
</style>
</head>
<body>
<div id="div1">
<table cellpadding="0" cellspacing="0">
<tr>
<td align='left' valign='top' colspan='358' rowspan='1'>
<div class="div2">
<input type="button" id='null' value='按钮1' x='133' y='32' style='width: 70; height: 21'></input>
</div>
</td>
<td align='left' valign='top' colspan='358' rowspan='1'>
<div class="div2">
<input type="button" id='null' value='按钮2' x='130' y='32' style='width: 70; height: 21'></input>
</div>
</td>
</tr>
<tr>
<td align='left' valign='top' colspan='358' rowspan='1'>
<div class="div2">
<input type="button" id='null' value='按钮3' x='130' y='35' style=''></input>
</div>
</td>
<td align='left' valign='top' colspan='358' rowspan='1'"'>
</td>
</tr>
</table>
</div>
</body>
</html>本回答被提问者采纳
如何在td中正确定位相对p标签
说明：问题是文本似乎从我不想要的td溢出，除此之外，我想将文本放在Header（H5）下面但是避免将文本包装在图像下面，我假设可以通过给图像提供静态宽度值并使用left属性来完成。但是，当我试图这样做时，它并不是正确的。
table.service_section{
width: 80%;
margin-left: 10%;
border-spacing: 10px;}
table.service_section td{
border: 2px solid #ccc;
box-sizing: border-box;
border-radius:5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
table.service_section td img{
display: inline-block;
width: 50px;
height: 25px;}
table.service_section td h5{
display: inline-block;
margin: 0;
padding: 0;
position: absolute;}
table.service_section td p{
display: inline-block;
position: relative;
margin: 0;
top: 0px;
left: 50px;
font-size: 10;}<table class = "service_section">
<tr>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>试试这个：
table.service_section {
width: 80%;
margin-left: 10%;
border-spacing: 10px;
}
table.service_section td {
border: 2px solid #ccc;
box-sizing: border-box;
border-radius:5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
table.service_section td img {
float: left;
width: 20%;
height: 25px;
}
table.service_section td h5 {
margin: 0 0 5px 0;
padding: 0;
position: relative;
width: 100%;
word-wrap:break-word;
}
table.service_section td p {
position: relative;
font-size: 10;
margin-top: 0;
word-wrap:break-word;
}
.wr {
width: 75%;
float: left;
margin-left: 4%;
}<table class = "service_section">
<tr>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
<div class="wr">
<h5>Home Button</h5>
<p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
</div>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
<div class="wr">
<h5>Home Button</h5>
<p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
</div>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" />
<div class="wr">
<h5>Home Button</h5>
<p>This is going to be information regarding the service / product which is provided by Odeyale Corporation.</p>
</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>Isaac - 看起来你的“table.service_section td p”你从左边推50px这个css“left：50px;”。那就是将你的p标签推到td的100％宽度之外。快速修复将添加50px的边距权限以抵消推送的p标签。这将使它保持在您正在寻找的窗口中。也就是说，有更优雅的方法可以使用Bootstrap甚至Flex Box实现相同的功能。查看有关Flex Box https://css-tricks.com/snippets/css/a-guide-to-flexbox/的文章。这可能会为您提供一些新策略来实现您的目标。再次，使用Bootstrap Cards可以帮助您实现同样的目标。最后一项，您的图像比需要的大得多。我会将图像调整到您想要的大小，这将帮助您消除不必要的代码，并帮助您更快地实现所需的结果。希望有所帮助。
table.service_section{
width: 80%;
margin-left: 10%;
border-spacing: 10px;}
table.service_section td{
border: 2px solid #ccc;
box-sizing: border-box;
border-radius:5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
table.service_section td img{
display: inline-block;
width: 50px;
height: 25px;}
table.service_section td h5{
display: inline-block;
margin: 0;
padding: 0;
position: absolute;}
table.service_section td p{
display: inline-block;
position: relative;
margin: 0;
top: 0px;
left: 50px;
margin-right: 55px;
font-size: 10;}<table class = "service_section">
<tr>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
<td>
<img src="https://image.flaticon.com/icons/svg/23/23665.svg" /> <h5>Home Button</h5>
<p>This is going to be information regarding the service/product which is provided by Odeyale Corporation.</p>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>以上是关于我要实现div相对td定位。设置td的position为relative后，td的border设置失效，是啥原因？的主要内容，如果未能解决你的问题，请参考以下文章
selenium通过文本内容定位元素（div,td,span等）