overflow-x: hidden in IE11 creates vertical scrollbar

Question

In Chrome, I have a property of overflow-x: hidden on the td's of a table. When the cell's contents exceeds the cell, the rest of the contents are hidden. When I go to test this in IE11, the contents of the are hidden; however, there is a nasty vertical scrollbar that appears and I'm not sure why. Here is what it looks like:

If I uncheck that property in dev tools, then the vertical scrollbar goes away, however, the contents overflow into the row. Is there some way to resolve this?

try this please https://stackoverflow.com/questions/7242385/hide-scrollbar-in-ie — Jeisson Huerfano, Jul 31 '17 at 13:32
Did you try specifying an overflow-y: hidden at the same time ? — Pierre Burton, Jul 31 '17 at 14:13

score 0 · Answer 1 · answered Jul 31 '17 at 15:09

well since you want hide the cell's contents when this exceeds the cell space you should try text-overflow something like:

<table class="custom">
  <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
    <tr>
    <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
        <td>
      long long long long lonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnng
    </td> 
  </tr>
</talble>

and the css:

.custom td {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

reference

overflow-x: hidden in IE11 creates vertical scrollbar

1 Answers1