Html Question posted in
Some basic documentation can be found here.

How to build a HTML/CSS table with scrollable lines?

Using pure CSS/HTML, I’m trying to build a table that vertically scrolls lines only (tbody) when there is no vertical space. My table has a single column.

Here is my code:

.dialog_table {
  display: block;
  border: 1px solid grey;
  border-collapse: collapse;
  background-color: orange;
  width: 100%;
  height: auto;
}

.dialog_thead {
  border: 1px solid grey;
  color: white;
  width: 100%;
  height: auto;
  background-color: purple;
}

.dialog_tbody {
  border: 1px solid grey;
  height: auto;
  overflow-y: auto;
}

.dialog_th {
  margin-right: 0;
}

.dialog_td {
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border: 1px solid grey;
  width: 1px;
  white-space: nowrap;
}

.dialog_tbody .dialog_tr:hover {
  background-color: green;
}
<table class="dialog_table">
  <thead class="dialog_thead">
    <td class="dialog_th">COLUMN 1</td>
  </thead>
  <tbody class="dialog_tbody">
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 1</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 2</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 3</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 4</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 5</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 6</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 7</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 8</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 9</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 10</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 11</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 12</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 13</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 14</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 15</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 16</td>
    </tr>
  </tbody>
</table>

With the above code, I’m getting 2 problems: an extra grid is added to the right side of the table and there is no scrollable lines – overflow-y: scroll seens not to be working.

Help appreciated to fix it.

Tags:

2

Answers


  1. 0

    try to remove
    display: block;
    from .dialog_table

    An element that has the display property set to block starts on a new line and takes up the available screen width.

    Login or Signup to reply.
  2. 0

    Use position:sticky:

    .dialog_table {
  border: 1px solid grey;
  border-collapse: collapse;
  background-color: orange;
  width: 100%;
  height: auto;
}

.dialog_thead {
  position:sticky; top:0;
  border: 1px solid grey;
  color: white;
  width: 100%;
  height: auto;
  background-color: purple;
}

.dialog_tbody {
  border: 1px solid grey;
  height: auto;
  overflow-y: auto;
}

.dialog_th {
  margin-right: 0;
}

.dialog_td {
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border: 1px solid grey;
  width: 1px;
  white-space: nowrap;
}

.dialog_tbody .dialog_tr:hover {
  background-color: green;
}
    <table class="dialog_table">
  <thead class="dialog_thead">
    <td class="dialog_th">COLUMN 1</td>
  </thead>
  <tbody class="dialog_tbody">
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 1</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 2</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 3</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 4</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 5</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 6</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 7</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 8</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 9</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 10</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 11</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 12</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 13</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 14</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 15</td>
    </tr>
    <tr class="dialog_tbody">
      <td class="dialog_td">DATA 16</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search