![]() ![]() Which makes it way more easier to use for users on mobile. If you resize your browser or check the demo on mobile you’ll see that we switched from this: This is exactly what we’re doing on our e-commerce template, Elyssi, check out the demo here. A very common example is to change from a table to a card or a similar layout. If you don’t want to hide your table’s information on mobile then I seriously recommend you change the layout of your data. Optional: you may add fixed-width values to your table headers to force the responsive state if your table is too small.You use table-fixed instead of table-auto, this is where this class really shines!.You add overflow-auto relative to the parent to activate the overflow.Here’s how you do that in Tailwind with the code we’re been using: The easiest way to make a table responsive is to make it overflow its parent container. Nevertheless, I do have two suggestions you can try for making your table content more responsive. The short answer is that there’s no ideal solution, and anything you decide will have tradeoffs. There’s been a lot of debate over the years about how to make tables properly responsive. Here’s the code for everything put together: The trick to this one is to add it to the instead of the inside the, that way you have more control over the text color: Song Similar as the striped rows example, we need to add our hover classes to the ** **element, like this: Like this: įor this one you need to add a border to each and ** **elements, I just add border-l and that does the trick. This is very easy, just add odd:bg-gray-100 to all your tr elements inside the body. Here are some more examples of common table designs you would encounter, we’re gonna be using the code above as a starter point but with some changes. Looks a bit better, right? Here’s the play link.Īs you can see, the big trick is that, for tables in Tailwind CSS, you can treat any table-specific element as any other, so you can style it however you want. Now let's make it more visually appealing by adding more spacing, an outer border, and text classes. This is the markup used to generate the screenshot you saw at the beginning of the video, and you can also check it out on Tailwind Play here. We’re gonna be using the markup used in the Tailwind docs, here’s our initial markup: Ok so now we got some theory out of the way, let us create our first table and add some styles to it. Whichever you choose to use, you should put it as a class, directly on the element, that will make the whole table behave accordingly. The width of the first row will set the column widths for the whole table. table-fixed which allows the table to ignore the content and use fixed widths for columns. ![]() table-auto which allow the table to automatically size columns to fit the contents of the cell.Tailwind has very little classes that pertain to tables, but there are 2 big ones: Like other HTML elements, tables are completely unstyled in Tailwind CSS, its up to you how you want to style it and that can be pretty powerful!īut before I show you how we code our tables, let me first break down something you need to understand when working with Tailwind CSS and tables. But when you create your markup you realize tables look like this: Ok so you want to build a table with HTML and you want to style it with Tailwind CSS. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |