![]() ![]() ![]() 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |