HTML + CSS: table with scrollbar if we have a long text

Question

I have a table like this:

<table class="tg">
  <tr>
    <th>XXXXXXXXXXXX</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

And I'm trying to put the scrollbar if the text is too long (XXXXXXXX). How can I do it?

Fiddle

Answer 1

The following created a scroll bar for me. It can be made prettier but the scrolling works. Also, remember to extract any styles into the appropriate CSS file.

<table class="tg">
  <tr>
    <th style="width: 100px; display: block; overflow-x: scroll;">XXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxxXXX</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
  <tr>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
</table>

The jsFiddle: http://jsfiddle.net/fn6bsduk/

Answer 2

You need to set the max-width: on your <th> and <td> items in the css to whatever pixel width you would like the scroll bar to show. See how I modified your original jsfiddle here http://jsfiddle.net/59nm1xea/2/

Answer 3

You need to set a width or maximum width on the cell you wish to enable scroll on.

.tg th{
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    padding:20px 20px;
    border-style:solid;
    border-width:1px;
    overflow:auto;
    max-width:50px;
}

By Adding max-width:50px to you .tg th selector it will assign the overflow: scroll (derived from auto) when it becomes longer than 50px.

Seen here: http://jsfiddle.net/1t4r7rfj/