Pergunta

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>
Foi útil?

Solução

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.

Outras dicas

The cells are not separate objects, and are grouped more specifically by their respective columns. You hover one td, the whole column will expand - pushing all content to the right with it. Tables are very primitive in their implementation of layouts compared to other methods. I do not know of a way to interpret table td's as separate objects in which you describe.

I would personally handle this with a div solution instead.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top