HTML Element Style How to - Scroll long lines in a table

Question

We would like to know how to scroll long lines in a table.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!-- ww w .  j ava 2 s  .  co  m-->
  width: 300px;
  table-layout: fixed;
}

table td {
  overflow-x: scroll;
  white-space: nowrap;
}

table td:first-child {
  width: 50px;
}
</style>
</head>
<body>
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>Hello, blah blah blah, 123, abc, def, run out of words!</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The code above is rendered as follows: