CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Yiedpozi
Yiedpozi

Reputation: 300

Table Fix Height For All Row

I want table content to align center for horizontal and vertical. I've done for that. But I need help to fix some code. Check out this JSFiddle and example code below: http://jsfiddle.net/yiedpozi/a8ZLJ/

CSS example code:

div.container {
    width: 500px;
    height: 200px;
}

table {
    width: 500px;
    height: 300px;
    table-layout: fixed;
}

td, tr {
    border: 1px solid red;
}

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
}

span.description {
    display: none;
}



JS example code:

$('td').hover(
  function () {
        $(this).find('span.description').css({
            'display': 'block'
        });
  }, 
  function () {
        $(this).find('span.description').css({
            'display': 'none'
        });
  }
);


You can see, if hover, it will show description, but height of table row will increase. I want it to be fix, so, before hover, title will center, when hover, all content will center, but not affect table content height. How can I do this?

Upvotes: 0

Views: 78

Answers (3)

adnan_mehmood
adnan_mehmood

Reputation: 1

You need to add a div tag inside each with class on div.

Just like that.

 <td>
   <div class="setHeight">
     <span class="title">This Is Title</span>
        <span class="description">Here is description. Here is description. Here is description. Here is description. Here is description.</span>
                </div>
</td>

You can add setHeight class as well.

    div .setHeight{
    width:auto;
   height:100px;
}

http://jsfiddle.net/CodeAstro/a8ZLJ/2/

Upvotes: 0

Nalaka526
Nalaka526

Reputation: 11464

Try setting a height in td, to a value which can hold both default and hover content.

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    height: 120px; 
}

JSFiddle

Upvotes: 1

Adel
Adel

Reputation: 1468

Update the following css classes:

td {
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    height:100px;
}

span.description {
    display: none;
    height:80px;
    overflow:auto; 
}

look at the updated JSFillde

Upvotes: 1

Related Questions