Fixed Table Without Scroll in X

Question

I have a table UI. I want to fix the position of table without scrolling. How can I do this ? My Table X is over Flow enter image description here

my code is https://jsfiddle.net/Divyadevi_29/1of57ouh/

I use

  table {
  position: relative;
  padding-top: 20px;
}
table thead {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
}
table thead tr {
  position: fixed;
  background: #fff;

}

its not working please help me.

Unfortunatly, the jsfiddle link is broken – James Douglas Jun 03 '17 at 06:22 — James Douglas, Jun 03 '17 at 06:22

score 0 · Accepted Answer · answered Jun 03 '17 at 06:17

0

Use width(in %) with every table element. Try this jsfiddle

table {
    max-width: 100%;
    border: none;
    border-spacing: 0;
    text-align: left;
    overflow-x: hidden;
}
th, tr {
  width:10%;
}

answered Jun 03 '17 at 06:17

Ashiqur Rahman

425
7
21

sir sorry i'm facing same issue. changing of width % not affecting in table. – Alana Jun 03 '17 at 06:22
Read this thoroughly. I hope you will understand https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody – Ashiqur Rahman Jun 03 '17 at 06:29

score 0 · Answer 2 · answered Jun 03 '17 at 07:01

Try wrapping the table in a div, and give it the styles of:

.wrapper {
  overflow-x:hidden;
  overflow-y:auto;
  height: 90px; /* Or whatever height you wish it to be */
  width: 500px; /* Or whatever width you wish it to be */
  padding-top: 20px;
}

.wrapper {
  overflow-x:hidden;
  overflow-y:auto;
  height: 90px;
  width: 500px;
  padding-top: 20px;
}
th, td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
  <table class="simple row-border hover">
    <thead>
      <tr>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Date</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Open</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Pending</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Inprogress</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Resolved</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Closed</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Email</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Phone</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Web</span>
          </div>
        </th>
        <th class="secondary-text">
          <div class="table-header">
            <span class="column-title">Total</span>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
      <tr>
        <td>day</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
        <td>tickets</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>

As you can see, this hides the overflow-x but uses scroll on overflow-y.

Fixed Table Without Scroll in X

2 Answers2