css 値が display:none のテーブル セル内に div があります。$.show() すると、セルが少し右に広がっています。これは、display:none の代わりに visible プロパティを使用すると問題なく動作しますが、必要がない場合は高さを予約したくありません。さまざまな表示プロパティを試し、CSS の幅、マージン、パディングを再配置し、背景画像を削除しました。
<div id='1'>
<table>
<tr>
<td>
<div class='container'>
<div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
<div>header</div>
<div>
<input type='button' value='add to cart'/>
</div>
</div>
</td>
<td>
<div class='container'>
<div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
<div>header</div>
<div>
<input type='button' value='add to cart'/>
</div>
</div>
</td>
<td>
<div class='container'>
<div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
<div>header</div>
<div>
<input type='button' value='add to cart'/>
</div>
</div>
</td>
</tr>
</table>
</div>
#1{width:400px;}
table {width:100%;}
tr {border: solid grey;}
.container{
border-right: 1px dotted #A5A5A5;
margin: 25px 0;
}
div {
display:block;
margin:auto;
text-align:center;
}
.error {
display:none;
padding-left:20px;
width:80px;
table-layout:fixed;
}