CODEWITHSUNDEEP
htmlcss
Erle
Erle

Reputation: 13

How can I make the scroll button on the right side not in the middle of table?

HTML Codes

<table id="container", cellspacing="0">
     <thead>
         <tr>
             <th>Commands</th>
             <th>Aliases</th>
             <th>Description</th>
         </tr>
     </thead>
     <tbody>
         <tr>
             <td>help</td>
             <td>Help</td>
             <td>List all available commands on AnVolt with description</td>
         </tr>
         <tr>
             <td>clean</td>
             <td>Purge</td>
             <td>Clean total messages in current channel</td>
         </tr>
         <tr>
             <td>userinfo</td>
             <td>Profile</td>
             <td>Gives you information about specific users, default is your profile</td>
         </tr>
         <tr>
             <td>serverinfo</td>
             <td>GuildInfo</td>
             <td>Gives you information about current server/guild, such a member count</td>
         </tr>
     </tbody>
 </table>

CSS Codes

table {
    border-collapse: collapse;
    box-sizing: border-box;
    box-shadow: 0 0 10px #000;
    text-align: left;
    overflow: hidden;
    width: 65%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    border-radius: 10px;
}

table thead {
    background-color: #000;
    color: #fff;
}

table th,
table td {
    padding: 16px 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 15px;
    font-weight: 700;
}

table tbody {
    display:block;
    height:100px;
    overflow:auto;
    float:right;
    width:100%;
}

Image related to the Table: Image. The image shows that the scroll button is in the middle of the image but I want to make it on the right side, anyone can help me out?

Edit: I've been added my HTML Codes. If there's any problem or any unnecessary codes, you can delete or edit the codes. Thanks!

Upvotes: 1

Views: 72

Answers (1)

Sandip Developer
Sandip Developer

Reputation: 71

This way you can do it:

<div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Command</th>
          <th scope="col">Status</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        <tr>
          <th scope="row">
            Command Text
          </th>
          <td scope="row">Yes</td>
          <td scope="row">Description Description Description Description Description Description Description
            Description Description Description Description Description</td>
        </tr>
        
      </tbody>
    </table>
  </div>

.table-responsive {
    border: 1px solid #D4D4D4;
    border-radius: 5px;
    vertical-align: middle !important;
    -webkit-box-shadow: rgb(0 0 0 / 10%) 0 2px 4px;
    -moz-box-shadow: rgb(0 0 0 / 10%) 0 2px 4px;
    box-shadow: rgb(0 0 0 / 10%) 0 2px 4px;
    height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}
table {
    box-sizing: border-box;
    text-align: left;
    width: 100%;
    color: #212529;
    border: 1px solid #D4D4D4;
    caption-side: bottom;
    border-collapse: collapse;
    display: table;
    text-indent: initial;
    border-spacing: 2px;
}

table thead {
    position: sticky;
    top: 0px;
    z-index: 2;
    vertical-align: bottom;
}
table thead th{ 
    background-color: #2b2d3b;
    vertical-align: middle !important;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 42px;
    padding: 0.5rem 0.5rem;
 }
 table thead th:first-child {
    border-radius: 5px 0 0 0;
}
table thead th:last-child {
    border-radius: 0 5px 0 0;
}
table tbody {
    border-top: inherit !important;
    vertical-align: middle !important;
}
table tbody td, table tbody th{  
height: 46px;
padding: 0.5rem 0.5rem;
line-height: 36px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #fff;
border-bottom-color: #D4D4D4;
vertical-align: middle !important;
color: #545454;
font-weight: 400;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
border-bottom: 1px solid #D4D4D4;
}

Or check in jsfiddle example link : https://jsfiddle.net/DeveloperSandip/5jhpv0xq/6/

Upvotes: 1

Related Questions