html表格单元格内容左右相同的位置

时间:2015-10-10 20:38:21

标签: html css

我试图从左表格单元格和右表格单元格中获取文本以在同一位置对齐。如果这有帮助,我也使用博主。这是我想要的图片

What i want

这是我的表格html

<div id="text1">
Motives are extremely important and  not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">

<tbody>
<tr>


<td height="400px" width="425px">
<div id="title1">

Sims with Bad Motives:</div>
<br />

<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>

</div>

</td>



<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>

</tr>
</tbody></table>
</div>

这里有任何与之相关的CSS

#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}

#text1 {
font-size: 15px;
text-align: center;
}

#table1 {
text-align: center;
vertical-align: top center;
}

#table1 {
margin-top: -10px;
}

1 个答案:

答案 0 :(得分:1)

天哪,可怕的标记。我几乎看不到它:)

尽管如此,页面上的元素具有相同的ID&gt; #title1#table1 ... ID是唯一的。类可以在同一页面上重用。您可以在不同的页面上使用相同的ID,但不能在同一页面上使用具有相同ID的两个元素。

您需要将一种统一性应用于标记,这就是所用的类。您需要为左侧和右侧列设置相同的布局。

这是“修复”:jsfiddle.net/swqza86p

我所做的是将ID转换为类,并使用tr设置vertical-align: top property元素。