Question

我的网页中有一个可滚动的Div，在该div中，我会显示一个表格。

问题是div有圆角，但是滚动条从圆角出来。

我该如何解决？我希望将滚动条向右推并显示在div下面。

    #TableDiv{
height: 100%;
width: 97%;
margin: auto;
overflow-y:auto;
overflow-x: hidden;
border-radius: 10px;
}

在该Div内，我显示了一个包含大量数据的表。

这是边的样子：

Answer 1

.container {
  background-color: #9498b3;
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  border-radius: 10px;
}
.container::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: red;
}

.container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: green;
}
.container::-webkit-scrollbar {
  width: 10px;

<html>
<body>
  <div class="container">
  some text is here some text is here some text is here some text is here some text is here some text is here some text is here   some text is here some text is here some text is here some text is here some text is here some text is here some text is here   some text is here some text is here some text is here some text is here some text is here some text is here some text is here   some text is here some text is here some text is here some text is here some text is here some text is here some text is here   some text is here some text is here some text is here some text is here some text is here some text is here some text is here
  </div>
</body>
</html>

尝试此操作，但请注意，Firefox或IE / Edge不支持自定义滚动条。

#TableDiv::-webkit-scrollbar {
  width: 20px;
}
#TableDiv::-webkit-scrollbar-track {
  border-radius: 10px;
}

#TableDiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

Answer 2

如果我正确理解了您的要求，这是您要寻找的吗？

.main {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.TableDiv {
  height: 200px;
  width: 250px;
  overflow-y: scroll;
  border-radius: 8px;
}

<div class="main">
  <div class="TableDiv">
    <table>
      <tr>
        <Td>When the API returns an image. I see more and more Image-Response GET APIs. With this term I mean: the API is called with a GET URL, and the response is a (JPG/PNG/GIF/WEBP/SVG) image, either directly or after a redirect. So the API can be used.
          When the API returns an image. I see more and more Image-Response GET APIs. With this term I mean: the API is called with a GET URL, and the response is a (JPG/PNG/GIF/WEBP/SVG) image, either directly or after a redirect. So the API can be used</Td>
      </tr>
    </table>
  </div>
</div>

Answer 3

我这里有一个例子。我希望这就是您想要的方式，否则就说吧！

<!DOCTYPE html>
<html>
<head>
<style>

div.scroll {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
  border-radius: 10px;
}


</style>
</head>
<body>

<div class="scroll">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>

带有表的div内的滚动条

3 个答案: