how to effect td on fixed table layout


Tags: html,css,fixed

Problem :

I am trying to animate a table cell without effecting the other cells or the table. I want to change the width and height of a td with a class corresponding on some type of event.I want the td to get bigger and over lap the other cells but without changing their position. How?

<table>
  <tr>
    <td class="change">
      A
    </td>
    <td class="change">
      B
    </td>
    <td class="change">
     C
   </td>
  </tr>
</table>

My css would be something like this:

table{
 table-layout: fixed;
 width: 4em;
 height: 2em;

}

.change{
 width: 1em;
 height: 1em;

}

 .change:hover{
 width: 3em;
 height: 3em;

}   

So I just want to make the td cell bigger when I hover over it but not effect the other cells position or table at all. How can I do this?

I just want to use CSS but overflow hidden or whitespace none do not work like this and the table moves all over ...

I Added this on an edit. If I put a div inside each td and scale the div bigger would that work without stretching the table? like

<table>
  <tr>
    <td>
      <div>
      A
      </div>
    </td>
    <td>
      <div class="change">
      B
      </div>
    </td>
    <td>
      <div>
     C
      </div>
   </td>
  </tr>
</table>


Solution :

if it is only for visual effect , you maybe have an option with transform:scale(3); to to zoom three times your element. DEMO

To avoid scaling inside content, do a down scaling , you can set transform-origin. other example

Anyhow, if you insert more content , table-layout:fixed; will still allow the cell and the whole row to grow vertically.


    CSS Howto..

    How to change CSS property in Magnific Popup

    How to center content vertically with unknown content and fixed layout

    CSS : How to give different spacers within the same navigation menu

    How to change CSS class of a HTML page element using ASP.NET?

    How to disable a YUI MenuBarItem from markup

    how to make DIV show up on top of other Divs

    how to get double border in using CSS?

    How can one fix a CSS3 graident background when using a box for content?

    How to use animation with transform CSS

    How to display an image using an img tag and css and class instead of src attribute

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    how to have a css in javascript when onsubmit trigger in another window?

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]

    How to apply master page and css to child page

    How to import a css file only for Firefox but not for other browsers?

    How to give different views for same url for different devices with same resolution?

    How to scale an element when it loads using only CSS?

    how to give css height a percentage of a different div (above original div)

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    how to remove the border from the last list item and select :nth-child (multiple items)

    Main navigation, classes on/off. HGelp understanding how this is built

    Make nav dropdown show above all other divs

    How achieve rounded shadow behide a rounded element using css3

    How to change CSS where id=array(index)?

    How to organize html and css to do this UI design with responsive design

    How to hide div on swipe in Angular

    how to set width of a div in percentage minus certain pixels using javascript or css

    How to add mouse hover properties to pie drawn on a node in d3?

    How to give css sprites effect?

    How to position content next to each other without table?