0

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;
}

ここに問題を示すフィドルがあります

4

3 に答える 3

1

これを CSS に対して行います。テーブルの幅が未定義または非常に小さい場合、これは機能しない可能性があります。

table {width:100%; table-layout: fixed;}

または

td {width: 33.33%;}
于 2012-11-20T18:55:36.720 に答える
0

.container に静的な幅を追加すると、次のように問題が解決します。

.container{
   border-right: 1px dotted #A5A5A5;
   float: left;
   margin: 25px 0;
   width: 250px; 
}

テーブルとそれらの div ラッパーの一部をすべて一緒に廃止し、もう少しセマンティックなものを使用することをお勧めします。表形式のデータというよりはアイテムのリストのように見えるので、代わりに順序なしリストに入れることを検討してください。

ここに実際の例を掲載しました: http://jsfiddle.net/ZYztj/

于 2012-11-20T18:51:35.557 に答える