Adding horizontal scroll for the first column of a table in html

Question

I have a table with four column, where the first column is a nested structure which may have (n) number of nesting and text length may be higher, I want to add horizontal scroll bar only for the first column of the table so that I can see the nesting structure.

I have tried the below code but not able to achieve horizontal scroll bar for the first column of the table.

I need a table with horizontal scroll bar only for the first column Name I have added a sample code which I have tried:

.table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid grey;
}

.wrapper {
  overflow-x: scroll;
  overflow-y: visible;
  padding-bottom: 1px;
  width: 700px;
}

td, th {
  border: 1px solid grey;
}

.indent {
  display: inline-block;
  width: 35px;
  height: 10px;
}

.table tr th:first-child,
.table tr td:first-child {
  width: 400px;
}

<!DOCTYPE html>
<html>
<head>
  <body>
    <div class='wrapper'>
      <table class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Level 1</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"></span>
              <span> Level 1.1 </span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Sub level 1.1.2</span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span> Sub Level 1.2.3</span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span>Level 2 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span>Level 2.1 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Level 2.1.2 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span class="indent"> </span>
              <span>Level 2.1.3 </span></td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
          <tr>
            <td>
              <span class="indent"></span>
              <span class="indent"></span>
              <span class="indent"></span>
              <span class="indent"></span>
              <span>Level 2.1.4 </span>
            </td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Gh05d · Accepted Answer · 2019-06-12 07:20:25Z

1

You can do this by putting a div into the cell you want to have the scrollbar and applying the following styles:

tbody tr:first-child td:first-child div {
  width: 100%;
  overflow-x: scroll;
}

Here is a Codepen with the full code: https://codepen.io/anon/pen/ewmVeR

answered Jun 12, 2019 at 7:20

Gh05d

9,06211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

praveech Over a year ago

This adds scroll to individual cell i need scroll for the entire column at the end

Vignesh Ammasi · Accepted Answer · 2019-06-12 07:59:07Z

1

You may try colgroup tag in HTML

Html

<colgroup>
<col class="column_extend">
</colgroup>

CSS

.column_extend {
  background-color: yellow;
  width: 150px;
  overflow-x: scroll;
  white-space: nowrap;
}

Here is a Codepen with the full code: https://codepen.io/vignesh_ammasi/live/orgqBK

answered Jun 12, 2019 at 7:59

Vignesh Ammasi

4011 gold badge5 silver badges12 bronze badges

Comments

Malekai · Accepted Answer · 2019-06-12 09:10:57Z

Try this instead:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.row-on-scroll {
  width: 100%;
  overflow: scroll;
  position: absolute;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<body>
  <h2>HTML Table</h2>
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr class="row-on-scroll">
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </table>
</body>
</html>

Collectives™ on Stack Overflow

Adding horizontal scroll for the first column of a table in html

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related