0

<table>3 つのセル ( )が<td>あり、各セルの幅は 150px、高さは 100px です。<a>高さ 100px、幅 200px、display:block をセル内に配置しました。しかし、その後、表のセルのサイズが 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;
}

これどうやってするの？

4

1 に答える 1

1

基本的position: 'relative';に、td に a を追加position:'absolute';し、span またはアンカー タグに a を追加します。

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

これが結果です

于 2013-08-24T18:35:57.443 に答える