Question

当您打开带描述的行（通过单击蓝色链接）时，表格中的单元格会向左侧移动几个像素。只有当表格单元格包含文本时才会出现，没有文本表格单元格不会移动。

Here is an example of my problem.（我正在使用Firefox）

HTML：

<table class="conferences-table">
    <thead>
      <tr class="headers">
        <th colspan="4">Overall info</th>
        <th colspan="4">Arrangement style</th>
        <th colspan="3">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr class="room">
        <td><a href="javascript:void(0)" class="description-link">With Text</a></td>
        <td>81,4 m2</td>
        <td>7</td>
        <td>over the city</td>
        <td>90 pax</td>
        <td>50 pax</td>
        <td>30 pax</td>
        <td>34 pax</td>
        <td>90 EUR</td>
        <td>130 EUR</td>
        <td>15 EUR</td>
       </tr>
       <tr class="description">
        <td colspan="11">
            <div class="content">
                <img src="http://lorempixel.com/400/200/" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </td>
       </tr>
       <tr class="room">
        <td><a href="javascript:void(0)" class="description-link">Without text</a></td>
        <td>81,4 m2</td>
        <td>7</td>
        <td>over the city</td>
        <td>90 pax</td>
        <td>50 pax</td>
        <td>30 pax</td>
        <td>34 pax</td>
        <td>90 EUR</td>
        <td>130 EUR</td>
        <td>15 EUR</td>
    </tr>
    <tr class="description">
      <td colspan="11">
          <div class="content">
              <img src="http://lorempixel.com/400/200/" alt="" />
          </div>
      </td>
    </tr>
  </tbody>
</table>

CSS：

table {
   width: 980px;
   margin: 0 auto;
}
img {
   float: left;
   padding: 5px;
}
p {
   margin-top: 0;
}

jQuery的：

$('.description-link').click(function() {
    $(this).closest('.room').next('.description').find('.content').slideToggle();
});

Answer 1

要停止Chrome中的垂直移位，请移除.content p上的边距并将其替换为填充。
要停止Firefox中的水平移位，请使用table-layout: fixed;来阻止单元格调整其宽度。

Have a jsBin!

CSS

table { 
    table-layout: fixed;
}

.content p {
    margin: 0;
    padding: 10px; /*Whatever desired number */
}

考虑使用CSS Normalize或CSS Reset来帮助避免将来出现此类小问题。

Answer 2

请将您的图片标记放在段落标记中。

<p><img src="http://lorempixel.com/400/200/" alt=""></p>

Answer 3

这是因为您使用了Paragraph tag。使用Class为<p>标记提供margin-top:0px;。应该工作。

Answer 4

只需修改td的宽度

     <style>
            td
            {
                width:300;
            }
     </style>

这可以解决您的问题。

表格单元格在文本显示/隐藏上移动

4 个答案: