Designing table rows to resemble full-width cards

Looking for a way to transform the rows of a table into full-width cards while maintaining the row layout? Here's what I have tried so far:

tbody>tr {
  display: block;
  padding: 1rem 0.5rem 1rem 0.5rem;
  margin: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.175) !important;
  border-radius: 0.375rem !important;
}

The result currently looks like this: https://i.sstatic.net/rWAvu.png

While close to what I want, the cards need to be full width for proper alignment with the headings. Any suggestions on how to achieve this?

Here is the structure of the table markup:

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xxl-10 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="p-datatable p-component p-datatable-responsive-scroll" data-scrollselectors=".p-datatable-wrapper" pv_id_11>
                        <div class="p-datatable-header">
                        </div>
                        <div class="p-datatable-wrapper">
                            <table role="table" class="p-datatable-table">
                                <thead class="p-datatable-thead" role="rowgroup">
                                    <tr role="row">
                                        <!-- th's for headings -->
                                    </tr>
                                </thead>
                                <tbody class="p-datatable-tbody" role="rowgroup">
                                    <tr class tabindex="-1" role="row">
                                        <td class role="cell">
                                            "John Smith"
                                        </td>
                                        <!-- other table cells -->
                                    </tr>
                                    <!-- other rows -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
csshtml-tablebootstrap-5

Answer №1

If you're facing a similar issue, I have some insights for you - this message is specifically for future visitors.

The culprit behind the problem lies in the CSS property display: block;. Though others have pointed out issues with display: flex;, I encountered the same dilemma.

Fortunately, the remedy is simple - just remove or adjust the display: block/flex; styling.

Main Issue:

        tbody>tr {
            display: block;
            padding: 1rem 0.5rem 1rem 0.5rem;
            margin: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.175) !important;
            border-radius: 0.375rem !important;
        }

https://i.sstatic.net/uH5PN.png and

tbody>tr {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            padding: 1rem 0.5rem 1rem 0.5rem;
            margin: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.175) !important;
            border-r

https://i.sstatic.net/sliKu.png

Solution:

The key solution here is to eliminate the specific display styling causing issues.

Secondary Problem:

While removing the display property partially solves the challenge, keep in mind that the padding and margin adjustments might not function correctly:

tbody>tr {
            padding: 1rem 0.5rem 1rem 0.5rem;
            margin: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.175) !important;
            border-radius: 0.375rem !important;
        }

https://i.sstatic.net/XBjlf.png

Ultimate Solution:

Rather than applying margin settings individually to each row, consider setting it at the table level using border-spacing: 0 1rem; and remember to include border-collapse: separate as well for the desired outcome.

table {
            width: 50%;
            border-collapse: separate !important;
            border-spacing: 0 1rem;
        }

        tbody>tr {
            border-radius: 0.375rem;
            outline: 1px solid rgba(0, 0, 0, 0.175)
            /* we use outline instead of border */
        }

        tbody>tr>td {
            padding: 1rem 0.5rem 1rem 0.5rem;
        }
<div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-xxl-10 col-xl-12">
                <div class="card">
                    <div class="card-body">
                        <div class="p-datatable p-component p-datatable-responsive-scroll"
                            data-scrollselectors=".p-datatable-wrapper" pv_id_11>
                            <div class="p-datatable-header">
                            </div>
                            <div class="p-datatable-wrapper">
                                <table role="table" class="p-datatable-table">
                                    <thead class="p-datatable-thead" role="rowgroup">
                                        <tr role="row">
                                            <th>
                                                name
                                            </th>
                                            <th>
                                                idk
                                            </th>
                                            <th>
                                                idk2
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="p-datatable-tbody" role="rowgroup">
                                        <tr class tabindex="-1" role="row">
                                            <td class role="cell">
                                                John Smith
                                            </td>
                                            <td class role="cell">
                                                smthin
                                            </td>
                                            <td class role="cell">
                                                sm other thing
                                            </td>
                                            <!-- other table cells -->
                                        </tr>
                                        <tr class tabindex="-1" role="row">
                                            <td class role="cell">
                                                smith john
                                            </td>
                                            <td class role="cell">
                                                smthin2
                                            </td>
                                            <td class role="cell">
                                                sm other thing2
                                            </td>
                                            <!-- other table cells -->
                                        </tr>
                                        <!-- other rows -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Note

If you are integrating your table with datatables, make sure to use !important on both table styles for proper functionality.

table {
     width: 100%;
     border-collapse: separate !important;
     border-spacing: 0 1rem !important;
}

Answer №2

Try applying padding to the table cell instead of the table row to avoid the display: block issue on the row.

Update: To add margin, consider using a spacer element as an alternative since applying margin directly to rows can impact the display.

table{
    width: 100%;
}

tbody>tr {
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
    border-radius: 0.375rem !important;
}

tbody>tr td, thead>tr td{
    padding: 1rem 0.5rem 1rem 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c2739273b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-xxl-10 col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="p-datatable p-component p-datatable-responsive-scroll" data-scrollselectors=".p-datatable-wrapper" pv_id_11>
                        <div class="p-datatable-header">
                        </div>
                        <div class="p-datatable-wrapper">
                            <table role="table" class="p-datatable-table">
                                <thead class="p-datatable-thead" role="rowgroup">
                                    <tr role="row">
                                        <!-- th's for headings -->
                                        <td>1</td>
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>
                                </thead>
                                <tbody class="p-datatable-tbody" role="rowgroup">
                                    <tr class tabindex="-1" role="row">
                                        <td class role="cell">
                                            "John Smith"
                                        </td>
                                        <!-- other table cells -->
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>

                                    <!-- spacer -->
                                    <tr style="border: none !important;">
                                        <td style="padding: 0.5rem;"></td>
                                    </tr>
                                    
                                    <!-- other rows -->
                                    <tr class tabindex="-1" role="row" style="margin-top: 500px;">
                                        <td class role="cell">
                                            "James Williams"
                                        </td>
                                        <!-- other table cells -->
                                        <td>2</td>
                                        <td>3</td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №3

You may want to consider adjusting the width of the <table> element

Here is the HTML code:

<table>
   <tbody>
      <tr><td>hello</td></tr>
      <tr><td>hello</td></tr>
   </tbody>
 </table>

And here is the corresponding CSS:

table {
   width: 100%;
}
tbody>tr {
   display: block;
   padding: 1rem 0.5rem 1rem 0.5rem;
   margin: 1.5rem;
   border: 1px solid rgba(0, 0, 0, 0.175) !important;
   border-radius: 0.375rem !important;
   width: auto;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

javascriptjqueryhtmlcss

Combining Bootstrap navbar with React Router for seamless navigation

I am new to using React and I am having trouble linking pages with Bootstrap navigation. I am attempting to use React Router DOM to navigate to different pages on click, but the app is not compiling because BrowserRouter is not being imported properly. I c ...

htmlcssreactjs

Ways to create an oval background for my button

Can someone help me create a button with a unique shape similar to the Products button on stack overflow? Check out this image for reference I attempted using border radius, but it didn't give me the desired effect. I searched for other options but c ...

htmlcsshover

Issues with alignment within Bootstrap grid system

I have three unique "cards" that I want to display horizontally and center on the page without using the bootstrap card class. Currently, I am attempting to assign each of them a width of .col-lg-4 within an outer div set to full width. However, they are s ...

csstwitter-bootstrap

Exploring the object tag box model and its properties for width and padding in Firefox version 6

Hey there, I've been puzzled by the fact that my Firefox browser seems to be using a different box model for my video embeds compared to Chrome. Even though the same CSS rules are being applied, if the object tag includes attributes like data="whateve ...

firefoxobjectpaddingcss

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: https://i.sstatic.net/WiBXH.jpg Initially, everything ...

csstextresponsive-designstylingtext-alignment

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

javascriptjqueryhtmlcsstoggle

Align the body of the table with the header after populating the table with values

Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...

javascripthtmlcsshtml-tablecss-tables

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

javascriptcssunicodeiconsglyphicons

Issues with Navigating through a Scrollable Menu

I'm having a difficult time grasping the concept and implementing a functional scrolling mechanism. Objective: Develop a large image viewer/gallery where users can navigate through images by clicking arrow keys or thumbnails in a menu. The gallery an ...

javascriptjqueryhtmlcss

Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div. When you take a look at my example, everything will become clear. <div class="drawer"> <p>Drawer</p> & ...

htmlcss

Utilize CSS to position an element absolutely above the scrollbar

I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar... Here is my code: document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.ons ...

cssscrollbarabsolute

Positioning a div with text over an image in a way that it

Hey everyone, I've run into a bit of an issue with my project. I'm trying to create a system where text appears over an image, but the problem is that my div is set to absolute position and I can't switch it to relative without causing major ...

htmlcss

Utilize CSS to prioritize the image and ensure it is responsive

I'm utilizing the 'featurette' feature in bootstrap. Currently, the page displays text on the left and an image on the right. As you reduce the browser size, they stack on top of each other, with the text appearing above the image. How can I ...

cssimageresponsive

Tailwind - make sure the dropdown list is always on top of all other elements

Having an issue configuring the position of a dropdown list. The objective is to ensure it stays on top of all elements, however, when inside a relative positioned element, it ends up being obscured by it. Here's an example code snippet to illustrate ...

htmlcssfrontendpositiontailwind-css

Menu Drop on top of Flash player

A challenge I am currently facing is with my live event site and the list of events displayed in a mouseover menu. The issue arises when the flash streaming player remains in front of the mouseover menu, causing interference across all versions of Interne ...

htmlcssflashinternet-explorerflowplayer

Maintain user input within the table following a page refresh

I have been working on developing a table that allows users to edit it. I successfully created a script that adds comments to the table, but unfortunately, these comments disappear when the page is refreshed. I understand that I may need some additional to ...

javascripthtmljsonhtml-tablelocal-storage

"Refreshing Your Internet Experience with Netbeans Chrome: A Guide to Clear

While developing an HTML / CSS / Javascript / PHP app in Netbeans, I've noticed that making changes to the HTML requires me to 'clear browsing data' in Chrome for the updates to show. I believe it's the 'cached images and files&apo ...

htmlcss

Differentiate among comparable values through placement regex

I'm currently tackling a challenge involving regex as I work on breaking down shorthand CSS code for the font property. Here is my progress thus far: var style = decl.val.match(/\s*(?:\s*(normal|italic|oblique)){1}/i); style = style ? style ...

javascriptcssregex

The bottom section of the main page

I've successfully implemented a footer that sticks to the bottom of each page as intended. However, I'm facing an issue when there's a large amount of text on a particular page that requires scrolling. The scroll continues beyond the footer, ...

htmlcssasp.netmaster-pagessticky-footer