Css - Styling table rows as full-width cards

user14131782
July 31, 2023
231 views
0 votes
2 Answers

I am trying to style a table such that the rows appear as cards (still with the same row layout, just as a full-width card).

So far I have got this:

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;
}

Which produces this result:

This is almost what I am looking for, however I need the cards to be full width so that the data aligns with the headings. Does anyone know how I can do this?

The table markup looks like this

<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>

Tags: css html-table

Answers

You can try to extend the width of the <table> container

HTML :

<table>
   <tbody>
      <tr><td>hi</td></tr>
      <tr><td>hi</td></tr>
   </tbody>
 </table>

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;
}

Instead of giving padding to the table row you can give it to the table cell to avoid display: block issue on the row.

Update: For margin, you can use spacer like below as we can’t use margin on the rows without changing 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/[email protected]/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>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Styling table rows as full-width cards

Answers