jquery - 表格单元格在文本显示/隐藏时移动

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

1. 要停止 Chrome 中的垂直移动，请移除 .content p 上的边距并将其替换为填充。

2. 要在 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以帮助避免将来出现此类小问题。