html - 如何在表格单元格中隐藏较大的元素 - CSS

Question

我有<table>3 个单元格 ( <td>)，每个单元格的宽度为 150 像素，高度为 100 像素。我<a>在一个单元格内放置了一个高度为 100 像素，宽度为 200 像素，显示：块。但随后表格单元格调整为 200 像素，显示整个 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

基本上，您将 a 添加position: 'relative';到 td 并将 a添加position:'absolute';到跨度或锚标记。

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;
}

这是结果