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

HTML table with first column horizontal scrolling

I have an HTML table with very long descriptions in the first column, the text inside the first column must be inline, so couldn’t split it into multiple lines. Does anyone know how to implement a table with only the first column able to scroll horizontally?

Tags:

2

Answers


  1. 0

    I would create two tables next to each other and style them like there are one. The first table on the left you make scrollable, e.g. the first column. And the other table not. Technical it are two tables but it will look as one.

    Login or Signup to reply.
  2. 0

    As you know the width you want the first column to be (whether e.g. 150px or nnvw etc) you can force the first cell of the first row to scroll on overflow, having told it its max width is to be 150px (etc).

    tr:first-child td:first-child {
  white-space: nowrap;
  overflow-x: scroll;
  max-width: 150px;
}

td:first-child {
  width: 150px;
}
    <table>
  <tr>
    <td>a longggggggggggggggggggggggggggggggggggggg text</td>
    <td>1st row 2nd col</td>
  </tr>
  <tr>
    <td>a shorter text</td>
    <td>2nd row 2nd col</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search