I have created a table using html and semantic ui (see html code below).
The problem with the following table is when the screen size changes to a smaller format the last columns are not visible anymore (see browser image below: header 9 is not visible anymore). There is also no horizontal scrolling available. Is there a fix for this behavior?
HTML
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8" /> <link href="semantic.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="semantic.min.js"></script> <title></title> </head> <body> <div class='ui container'> <table class="ui striped selectable celled table" id="overviewtable"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> <th>header 5</th> <th>header 6</th> <th>header 7</th> <th>header 8</th> <th>header 9</th> </tr> </thead> <tbody> <tr> <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td> <td>qsdfdqsfdqsfdfqsf qs dfsq</td> <td>dqfdqsfdsq</td> <td>dsqfqsdf</td> <td>sqdfsqdf</td> <td>sdfsdfqsf</td> <td>dsfqsdfqsdfqsdf</td> <td>sdqfsqdfsd</td> <td>dsqfqsfdqsfsqfqsfdqsf</td> </tr> </tbody> </table> </div> </body> </html> Browser result 
If you change the screen width further than the table will flip to vertical mode.
PS: same behavior in firefox, chrome and safari.
4 Answers
Answers 1
Give the body tag the style overflow-x:scroll !important;.
That is
body{ overflow-x:scroll !important; } The !important is used because if an overflow-x:hidden is set anywhere, this rule will override it.
Note that set it to body. setting it to container will make a scroll bar just below the header. Since you want a scroll bar for the page, set it to body
**Note : you can give scroll or auto
body{ overflow-x:scroll !important; }<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8" /> <link href="semantic.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="semantic.min.js"></script> <title></title> </head> <body> <div class='ui container'> <table class="ui striped selectable celled table" id="overviewtable"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> <th>header 5</th> <th>header 6</th> <th>header 7</th> <th>header 8</th> <th>header 9</th> </tr> </thead> <tbody> <tr> <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td> <td>qsdfdqsfdqsfdfqsf qs dfsq</td> <td>dqfdqsfdsq</td> <td>dsqfqsdf</td> <td>sqdfsqdf</td> <td>sdfsdfqsf</td> <td>dsfqsdfqsdfqsdf</td> <td>sdqfsqdfsd</td> <td>dsqfqsfdqsfsqfqsfdqsf</td> </tr> </tbody> </table> </div> </body> </html>Answers 2
Try in your css:
.ui.container { overflow-x: auto; } Answers 3
Here is solution I have used to display table properly.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta charset="utf-8" /> <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script> <style> .container { width: 90% !important; } </style> <title></title> </head> <body> <div class='ui container'> <table class="ui striped selectable celled table" id="overviewtable"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> <th>header 5</th> <th>header 6</th> <th>header 7</th> <th>header 8</th> <th>header 9</th> </tr> </thead> <tbody> <tr> <td>sdfsdqfqdsf qsfqsf qs dqsfdqfdq</td> <td>qsdfdqsfdqsfdfqsf qs dfsq</td> <td>dqfdqsfdsq</td> <td>dsqfqsdf</td> <td>sqdfsqdf</td> <td>sdfsdfqsf</td> <td>dsfqsdfqsdfqsdf</td> <td>sdqfsqdfsd</td> <td>dsqfqsfdqsfsqfqsfdqsf</td> </tr> </tbody> </table> </div> </body> </html>Answers 4
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
Therefor in your css:
body{ overflow-x:scroll; } *Note: Also try not to use !important as much as possible since it gets you in problems later on.
0 comments:
Post a Comment