2

我无法在 Firefox 和 IE 中使用表格找出定位问题。小提琴将正确显示完整的问题http://jsfiddle.net/qfDB9/即使提供了适当的高度和宽度，问题仍然存在。我创建表格的实际原因在 Chrome 中完美显示，而 IE 和 Firefox 存在定位问题。

CSS：

table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;
}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

HTML：

<table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
<tr>
    <td id="number_table">1</td>
    <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
    <td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td>
</tr>
<tr>
    <td rowspan="3"></td>
</tr>
<tr>
     <td id="band_name">Something</td>
</tr>
</table>

有没有办法解决这个问题。

4

3 回答 3

2

您需要垂直对齐<tr>标签中的内容

table tr { vertical-align:top; }

见演示

我还可以补充一点，您应该考虑使用div's而不是tables

于 2013-09-17T13:56:56.610 回答
0

建议，总是尝试使用语义代码。就像使用 thead、tbody 一样，因为它也有助于实现 CSS。还有助于简化整个站点的 CSS。

解决方案您可以添加此 CSS " table tbody td{vertical-align:top;}"，以便所有<td>s 中的所有内容都应与顶部对齐。因此，如果您必须提供一些通常对齐底部的表格标题，那么您可以通过<thead> <th>“vertical-align:bottom.”来处理。

请参考这里的代码：

HTML

    <table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="number_table">1</td>
      <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
      <td rowspan="4" id="description_table">something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br>
        something something <br>
        <br>
        <br>
        <br></td>
    </tr>
    <tr>
      <td rowspan="3"></td>
    </tr>
    <tr>
      <td id="band_name">Something</td>
    </tr>
  </tbody>
</table>

CSS

table thead th{vertical-align:bottom;}
table tbody td{vertical-align:top;}


table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;

}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

您也可以参考小提琴：http: //jsfiddle.net/aasthatuteja/sU3SS/

让我知道是否有帮助！

享受！！

于 2013-09-17T14:30:13.603 回答
0

[已解决]看看这个。只需添加valign="top"到<tr>或<td>

在这里演示：http: //jsfiddle.net/qfDB9/9/

于 2013-09-17T14:01:43.190 回答