Полоса прокрутки внутри div со столом - PullRequest
Новая
       22

Полоса прокрутки внутри div со столом

0 голосов
/ 22 марта 2020

У меня есть Div на моей веб-странице, который можно прокручивать, в этом div я представляю таблицу.

Проблема в том, что div имеет круглые углы, но полоса прокрутки выходит из углы.

Как я могу это исправить? Я sh до пу sh полосу прокрутки вправо и показываю под div. 

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

Внутри этого Div я показываю таблицу с большим количеством данных.

Вот как выглядит край:

enter image description here

Ответы [ 3 ]

1 голос
/ 22 марта 2020 

.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;
}
0 голосов
/ 22 марта 2020

У меня есть пример. Я надеюсь, что это так, как вы хотите, в противном случае сказать это! 

<!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>
0 голосов
/ 22 марта 2020

Если я правильно понял ваше требование, это то, что вы ищете? 

.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>
...