How to create responsive table in html using CSS

to create responsive table in html you need html code of table below:
<table border="1"> <tbody> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </tbody> </table> There are two important codes tr and td
tr: creates the rows of the table.
td: Creates the columns for the table.
When the number of columns is very large, the content of the table appears poorly, especially in mobile devices, note the following example
<table border="1"> <tbody> <tr><td>Meta keywords generator for blogger</td><td>Meta keywords generator for blogger</td><td>Meta keywords generator for blogger</td><td>Meta keywords generator for blogger</td><td>Meta keywords generator for blogger</td></tr> </tbody> </table> When the number of columns is very large, the content of the table appears poorly, especially in mobile devices, note the following example
In this case, we need some css property in order to make the table responsive to the page without problems .
create div tag and make them overflow-x: auto with CSS, insert the table code inside this div.
add white-space:nowrap style to td tag, look at this exemple to understand me
<style> #t-output{overflow-x:auto}#t-output td{padding:5px;white-space:nowrap} </style> <div id="t-output" > <table border="1"> <tbody><tr><td>cell 0,0</td><td>cell 1,0</td><td>cell 2,0</td><td>cell 3,0</td><td>cell 4,0</td><td>cell 5,0</td><td>cell 6,0</td><td>cell 7,0</td><td>cell 8,0</td><td>cell 9,0</td><td>cell 10,0</td><td>cell 11,0</td><td>cell 12,0</td><td>cell 13,0</td><td>cell 14,0</td></tr> </tbody></table> </div>

© Manajmnt code

Share to :

☷✎