Html - How to set border-radius to scrollable overflowing grid table?

yung_gal
July 31, 2023
273 views
0 votes
2 Answers

I have a table made using Grid Css. The problem is I can’t set border-radius to it because of overflow: auto, which I need.

What I have:

What I’d like to achive (radiuses always on borders of table and stay there while scrolling):

thead, table, tbody, tr, th, td { 
  display: block 
}

.table__row {
  grid-template-columns: 74px 170px 170px 170px 170px 170px 170px 170px 170px 170px 170px;
  display: grid;
  grid-gap: 1px;
}


.table {
    display: grid;
    width: 1000px;
    margin: 0 auto;
    overflow: auto;
}

.table__head {
    background-color: #EDEFF4;
    padding: 20px 0;
    height: 64px;
}

.table__body {
    display: grid;
    border-radius: 16px;
}

.table__cell {
    padding: 12px 16px;
}

.table__body .table__cell {
    background-color: #747C8C;
    border-bottom: 1px solid #E2E4F6;
}

<table class="table">
      <thead class="table__head">
        <tr class="table__row">
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
          <th class="table__cell table__cell_title">
            Title
          </th>
        </tr>
      </thead>
      <tbody class="table__body">
        <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
                <tr class="table__row">
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
            <td class="table__cell">
              Text
            </td>
        </tr>
      </tbody>
    </table>

I tried to set overflow for both body and header sections separately but in this case I need to make synchronized scroll because in this case they’ll scroll independently. Is there some another way to set border-radius to overflowing table?

Tags: css html

Answers

- PatelHarsh
- July 31, 2023 at 6:46 am
- 0 votes
0
Simple just apply overflow to the table body.
```
.table__body {
   display: grid;
   border-radius: 16px;
   overflow: auto;
}
```
And you talk about scroll synchronized then there is one js plugin which will sync the both scroll at a same time (https://github.com/asvd/intence) have a look at it and hope you get solution for this!! 🙂
Login or Signup to reply.

Since @patel-harsh‘s solution doesn’t fit the expected result, here’s a more complex CSS selector solution using :first-child and :last-child selectors

table tr:first-child td:first-child { border-radius: 7px 0 0 0; }
table tr:first-child td:last-child { border-radius: 0 7px 0 0; }
table tr:last-child td:first-child { border-radius: 0 0 0 7px; }
table tr:last-child td:last-child { border-radius: 0 0 7px 0; }

/* following section is for visual purposes */
table {
  border-collapse: collapse;
}
table td {
    padding: 7px 12px;
    background: #e5e5e5;
}

<table>
  <tr>
    <td>First</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Value</td>
  </tr>
</table>

<br>

<table>
  <tr>
    <td>First</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Second</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Third</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Fourth</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Fifth</td>
    <td>Value</td>
  </tr>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to set border-radius to scrollable overflowing grid table?

Answers