Question

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

基本上，您向td添加position: 'relative';，在span或锚标记中添加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;
}

以下是result

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

1 个答案: