Jump to content

Recommended Posts

Posted
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
  width: 100%; 
  border: 1px solid #ddd; 
} 
 
th, td { 
  text-align: left; 
  padding: 8px; 
} 
 
tr:nth-child(even){background-color: #f2f2f2} 
</style> 
</head> 
<body> 
 
<h2>Responsive Table</h2> 
<p>If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed.</p> 
<p>Resize the browser window to see the effect. Try to remove the div element and see what happens to the table.</p> 
 
<div style="overflow-x:auto;"> 
  <table> 
    <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
      <th>Points</th> 
    </tr> 
    <tr> 
      <td>Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
      <td>50</td> 
    </tr> 
    <tr> 
      <td>Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
      <td>94</td> 
    </tr> 
    <tr> 
      <td>Adam</td> 
      <td>Johnson</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
      <td>67</td> 
    </tr> 
  </table> 
</div> 
 
</body> 
</html> 

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...