如何隱藏表格單元格內的較大元素 - CSS

Question

我有一個<table>與3個單元格（<td>），每個單元格寬度爲150px，高度爲100px。我在單元格內放置了高度爲100px，寬度爲200px，顯示：塊的<a>。但是，然後表格單元格調整到200px顯示整個div。但我只想看到div的一部分，並且單元格可能保持原樣，寬度爲150px。

html;

<table class="mytable"> 
    <td class="cell"> 
    <a class="wrapper">sometext</a> 
    </td> 
    <td class="cell">aa</td> 
    <td class="cell">bb</td> 
</table> 

css;

.mytable{ 
    table-layout:fixed; 
} 
.mytable tr td{ 
    width: 150px; 
    height: 100px; 
    overflow: hidden; 
} 
.wrapper{ 
    display: block; 
    width: 200px; 
    height: 100px; 
} 

我該怎麼做？

Answer 1

基本上，您將一個position: 'relative';添加到td，並將​​一個position:'absolute';添加到span或anchor標記。

HTML：

<table> 
    <tr> 
     <td><a>Hello</a></td> 
     <td><a>World</a></td> 
     <td><a>Hi</a></td> 
    </tr> 
</table> 

CSS：

a { 
    display:block; 
    width:200px; 
    height:100px; 
    position:absolute; 
    background-color:green; 
} 
td{ 
    position:relative; 
    overflow:hidden; 
    width:150px; 
    height:200px; 
} 

這裏是result