Question

I have a div inside of a table cell with css value of display:none. When I $.show() it, the cell is slightly expanding to the right. This works fine when I use the visible property instead of display:none, but I do not want to reserve the height if it isn’t needed. I’ve tried various display properties as well as rearranging the css width, margins, and padding, as well as removing the background images.

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

Here is a fiddle showing the problem

Answer 1

Do this to the CSS. This may not work when the table width is undefined or very small.

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

Or

td {width: 33.33%;}