{"id":3918,"date":"2022-10-22T05:23:53","date_gmt":"2022-10-22T05:23:53","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3918"},"modified":"2023-06-10T11:34:39","modified_gmt":"2023-06-10T11:34:39","slug":"tailwind-css-responsive-table","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tailwind-css-responsive-table\/","title":{"rendered":"Tailwind – CSS Responsive Table"},"content":{"rendered":"

Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-designed CSS classes to help you quickly build responsive and customizable user interfaces. One of the common UI components that you might need to build is a responsive table, which can be tricky to style and make it work well on different devices.<\/p>\n

Tailwind CSS provides pre-designed classes to help you build responsive tables easily. These classes allow you to style the table header, body, and cells, as well as handle table layout and alignment. With Tailwind CSS, you can easily create a responsive table that looks great on any device and screen size.<\/p>\n

For example, to create a basic responsive table using Tailwind CSS, you can use the following HTML code:<\/p>\n

<div class=\"overflow-x-auto\">\r\n  <table class=\"table w-full\">\r\n    <thead>\r\n      <tr>\r\n        <th class=\"px-4 py-2\">Name<\/th>\r\n        <th class=\"px-4 py-2\">Age<\/th>\r\n        <th class=\"px-4 py-2\">Email<\/th>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n      <tr>\r\n        <td class=\"border px-4 py-2\">John Doe<\/td>\r\n        <td class=\"border px-4 py-2\">35<\/td>\r\n        <td class=\"border px-4 py-2\">john@example.com<\/td>\r\n      <\/tr>\r\n      <tr>\r\n        <td class=\"border px-4 py-2\">Jane Doe<\/td>\r\n        <td class=\"border px-4 py-2\">28<\/td>\r\n        <td class=\"border px-4 py-2\">jane@example.com<\/td>\r\n      <\/tr>\r\n    <\/tbody>\r\n  <\/table>\r\n<\/div>\r\n<\/pre>\n
In this example, the table<\/code> class is used to define the table, while the thead<\/code>, tbody<\/code>, th<\/code>, and td<\/code> elements are used to define the table structure. The px-4<\/code> and py-2<\/code> classes are used to set the padding of the cells, while the border<\/code> class is used to add a border to the cells.<\/p>\n
The overflow-x-auto<\/code> class is used to enable horizontal scrolling on small screens when the table width exceeds the screen size.<\/p>\n
Overall, Tailwind CSS makes it easy to build responsive tables that look great on any device and screen size.<\/p>\n
\n
\n
<\/i> Demo Page<\/span><\/a><\/div>\n<\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Tailwind CSS is a popular utility-first CSS framework that provides a set <\/a><\/p>\n","protected":false},"author":1,"featured_media":3919,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,20],"tags":[239,475,472,474,103,392],"newstopic":[],"class_list":{"0":"post-3918","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-javascript","9":"tag-chart-js","10":"tag-css-responsive-table","11":"tag-tailwind-css","12":"tag-tailwind-tutorial","13":"tag-web-design","14":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3918"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3918\/revisions"}],"predecessor-version":[{"id":3921,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3918\/revisions\/3921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3919"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3918"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}