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>

© 2025 Manajmnt code

Share to :

☷✎

Related

• How to create html source code with syntax highlighting [no library] In this code i will be share with you how to create html code editor with: syntax hightl… Read More
• Create simple recent post with thumbnail in bloggerCreate simple recent post with thumbnail using blogger API & JavaScript You can make it appear diffe… Read More
• How to Remove Background Using Python and AI offline button.btn-run { display: none; } Python, AI, image processing, background removal, rembg,… Read More