CODEWITHSUNDEEP
htmlcssgoogle-chrome
inf0rm4tik3r
inf0rm4tik3r

Reputation: 81

box-shadow behaviour on <td> elements

Update:

After I filed a bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=763337,

it seems we could have it fixed in Chrome version 62.

Try to hover the td elements of this fiddle in the newest versions of Chrome and Firefox.

Firefox works like a charm (in my opinion, a box-shadow should not add anything to the width / height calculations), but Chrome sadly adds scrollbars (try hovering the bottom right cell).

How can I prevent that from happening, but still keep the responsiveness?

This behaviour only seems to occur when using the absolutely newest Chrome version. Which for me is:

Version 61.0.3163.79 (Official Build) (64-Bit)

Just tested the code snippet on my notebook which still had a slightly older version installed. Result: no scrollbars while hovering. After the automatic update and a restart, the scrollbars appeared.

div {
  border: 1px solid green;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}
<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>

Upvotes: 5

Views: 8909

Answers (3)

Mohammed Wahed Khan
Mohammed Wahed Khan

Reputation: 898

I've used flex-box, as it is easy and very much responsive.

Here is the code:

div {
  border: 1px solid green;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

table {
  width: 100%;
}

tr {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

td {
  flex: 1;
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}
<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>

Upvotes: -1

Paolo Forgia
Paolo Forgia

Reputation: 6748

It looks like bug of Chrome on Windows only. I tested also in Google Canary (Chrome 63) and the problem persists so it is possible that it may not being fixed so soon.

The problem is caused by overflow: auto, in your case it can be easly solved by removing it or setting as visible (default).

However when hovering the cells at the right (top and bottom) the scroll bar appear for the body. A solution can be setting overflow: hidden for the body so the espected results is as desired.

I would like to note that this is not a great solution but I suggest to use it temporarly until this bug has been fixed.

body {
  overflow: hidden;
}

div {
  border: 1px solid green;
  width: 100%;
  overflow: visible;
}

table {
  width: 100%;
}

td {
  border: 1px solid red;
}

td:hover {
  box-shadow: 2px 2px 15px -2px rgb(50, 50, 50);
}
<div>
  <table>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
    <tr>
      <td>This is some content</td>
      <td>This is some content</td>
      <td>This is some content</td>
    </tr>
  </table>
</div>

Upvotes: 5

minhung
minhung

Reputation: 18

i think with chrome. you can try to
-webkit-box-shadow: 5px 5px 15px -2px rgb(50, 50, 50);

Upvotes: -2

Related Questions