CODEWITHSUNDEEP
htmlcsshtml-table
Alfred
Alfred

Reputation: 21406

How to hide a larger element inside a table cell - CSS

I have a <table> with 3 cells (<td>), each cell with 150px width and 100px height. I placed a <a> having height 100px, width 200px, display:block, inside a cell. But then the table cell resized into 200px showing the entire div. But I just want to see only a portion of div and the cell may remain as such, 150px wide.

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

How can I do this?

Upvotes: 0

Views: 872

Answers (1)

Abijeet Patro
Abijeet Patro

Reputation: 2884

Basically you add a position: 'relative'; to the td's and a position:'absolute'; to the span or anchor tags.

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

Here is the result

Upvotes: 1

Related Questions