CODEWITHSUNDEEP
htmlcss
Rob Allen
Rob Allen

Reputation: 2911

display div inside table cell with resizing

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

Upvotes: 0

Views: 3338

Answers (3)

Joel
Joel

Reputation: 5450

While adding a static width to .container will solve your problem like so:

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

I might recommend doing away with the table and some of those div wrappers all together and using something a little more semantic. It seems like it is more of a list of items than tabular data, so you might consider putting it in an Unordered List instead.

I have put up a working example here: http://jsfiddle.net/ZYztj/

Upvotes: 0

Dan
Dan

Reputation: 57881

Adding two attributes cellspacing="0", cellpading="0" to the <table>, and CSS rule:

tr, td {
    margin: 0;
    padding: 0;
}

Will fix your issue completely and cross browser.

Here is the Fiddle

Also, never use id name starting with the number, like #1, 'cause it can fail in some browsers.

Upvotes: 0

mikeslattery
mikeslattery

Reputation: 4119

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

Upvotes: 1

Related Questions