Прокручиваемый стол с закругленными углами - PullRequest
Новая
       42

Прокручиваемый стол с закругленными углами

2 голосов
/ 22 января 2020

Я создал таблицу, которая прокручивается по вертикали, когда строк слишком много. Это можно увидеть здесь https://jsfiddle.net/hp5je3ko/1/. Однако я бы хотел добавить радиус границы в таблицу. Как вы можете видеть, добавление радиуса границы к самой table отображается только при прокрутке вправо-вниз. Добавление радиуса границы к .table-wrapper почти работает. Однако верхний правый и верхний левый углы не закруглены должным образом, потому что полоса прокрутки находится внутри оболочки.

Как заставить работать этот радиус границы?

Спасибо. 

.table-wrapper {
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
}

.table-wrapper * {
	margin: 0;
	box-sizing: border-box;
}

.table-wrapper table {
	border-collapse: separate;
	font-size: 13px;
	background-color: #121212;
	text-transform: uppercase;
	border-spacing: 0;
	table-layout: fixed;
	border-radius: 30px;
  color: #fff;
}

table thead tr th {
	padding: 18px 24px;
	border-bottom: 1px solid #1c1c1c;
	position: sticky;
	top: 0;
  background-color: #121212;
}

table tbody tr td {
	padding: 11px 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
    </tbody>
  </table>
</div>

Ответы [ 4 ]

1 голос
/ 23 января 2020

удаленная таблица border-radius

Основная идея сделать обертку width: fit-content, добавить к ней border-radius и сделать полосу прокрутки width: 0

.table-wrapper {
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
  width: fit-content;
  border-radius: 30px;
}

.table-wrapper * {
	margin: 0;
	box-sizing: border-box;
}

.table-wrapper table {
	border-collapse: separate;
	font-size: 13px;
	background-color: #121212;
	text-transform: uppercase;
	border-spacing: 0;
	table-layout: fixed;
  color: #fff;
}

table thead tr th {
	padding: 18px 24px;
	border-bottom: 1px solid #1c1c1c;
	position: sticky;
	top: 0;
  background-color: #121212;
}

table tbody tr td {
	padding: 11px 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}


::-webkit-scrollbar {
  width: 0;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
    </tbody>
  </table>
</div>
0 голосов
/ 22 января 2020

Вы попробуете это CSS, я думаю, что ваша проблема будет решена, спасибо ..! 

        .table-wrapper{
            padding: 50px;
        }

        table{
            display: block;
            border-radius: 50px;
            background-color: yellow;
        }

        table thead{
            background-color:pink;
            position: relative;
            display: block;
            width: 100%;
            border-radius: 20px 20px 0px 0px;
            color: white;
        }

        table tbody{
            max-height: 250px;
            display: block; 
            overflow-y:scroll;
        }

        table tr{
            width: 100%;
            display:flex;
        }

        table td,table th{
            flex-basis:100%;
            flex-grow:2;
            display: block;
            padding: 1rem;
            text-align:left;
        }

В конце также вы можете установить полосу прокрутки с помощью следующих css, связанных с радиусом окна вашей таблицы. 

::-webkit-scrollbar { width: 10px; }

    /* Track */
    ::-webkit-scrollbar-track { border: 4px solid transparent; }

    /* Handle */
    ::-webkit-scrollbar-thumb { border: 1px solid rgb(0,0,0); }
0 голосов
/ 22 января 2020

Удалено border-radius из таблицы.

Основная идея добавляется к каждому первому и последнему дочернему элементу th с и нижнему колонтитулу td с двумя div с с position: absolute и разные z-index эс. Нижняя часть имеет цвет фона (белый), над ним - border-radius и цвет таблицы.

Остальные модификации смотрите в фрагменте. 

.table-wrapper {
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
}

.table-wrapper * {
	margin: 0;
	box-sizing: border-box;
}

.table-wrapper table {
	border-collapse: separate;
	font-size: 13px;
	background-color: #121212;
	text-transform: uppercase;
	border-spacing: 0;
	table-layout: fixed;
  color: #fff;
}

table tbody tr td {
	padding: 11px 24px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-wrapper table {
    border-collapse: separate;
    font-size: 13px;
    background-color: #121212;
    text-transform: uppercase;
    border-spacing: 0;
    table-layout: fixed;
    color: #fff;
}

table tbody tr td {
    padding: 11px 24px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay, .overlay2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.overlay2 {
    background-color: #fff;
}
.overlay {
    background-color: #121212;
    z-index: 3;
}

table thead tr th:first-child .overlay {
    border-top-left-radius: 30px;
    padding: 18px 24px;
}

table thead tr th:last-child .overlay {
    padding: 18px 24px;
    border-top-right-radius: 30px;
}

table thead tr th {
    top: 0;
    border-bottom: 1px solid #1c1c1c;
}

/* safari and ios need the tfoot itself to be position:sticky also */
table thead tr th,
table tfoot,
table tfoot th,
table tfoot td {
  position: -webkit-sticky;
  position: sticky;
  background-color: #121212;
  padding: 18px 24px;
  z-index: 3;
}

table tfoot,
table tfoot th,
table tfoot td {
  bottom: 0;
  color: #121212;
}

table tfoot tr td:first-child .overlay {
    border-bottom-left-radius: 30px;
}

table tfoot tr td:last-child .overlay  {
    border-bottom-right-radius: 30px;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>
          <div class="overlay">
             Item
          </div>
          <div class="overlay2"></div>
        </th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>Item</th>
        <th>
          <div class="overlay">
            Item
          </div>
          <div class="overlay2"></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
      <tr>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
        <td>Thingggg</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <div class="overlay"></div>
          <div class="overlay2"></div>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <div class="overlay"></div>
          <div class="overlay2"></div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>
0 голосов
/ 22 января 2020

Я пишу код для того, что вам нужно 

        body {
            padding: 4rem;
        }

        .table{
            display: block;
            empty-cells: show;
            border-spacing: 0;
            border: 1px solid;
            border-radius: 2rem;
        }

        .table thead{
            background-color:orangered;
            position: relative;
            display: block;
            width: 100%;
            border-radius: 2rem 2rem 0rem 0rem;
            color: white;
        }

        .table tbody{
            max-height: 20rem;
            padding: 2rem;  
            display: block; 
            overflow-y:scroll;
            border-top: 2px solid rgba(0,0,0,0.2);
        }

        .table tr{
            width: 100%;
            display:flex;
        }

        .table td,.table th{
            flex-basis:100%;
            flex-grow:2;
            display: block;
            padding: 1rem;
            text-align:left;
        }

        .table tbody tr:nth-child(2n){
        background-color: orangered;
        }
    <body>
      <table class="table ">
        <thead>
          <tr>
          <th>Head 1</th>
          <th>Head 2</th>
          <th>Head 3</th>
          <th>Head 4</th>
          </tr>
        </thead>
        <tbody class="body">
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td></td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr><tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </tbody>
      </table>
    </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...