문제

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>
도움이 되었습니까?

해결책

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.

다른 팁

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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top