convert rows of html table into bootstrap cards

Question

I have html table with rows like below:

I want to convert each row to a bootstrap card
I tried to give each  the bootstrap class class="card" using jquery:
$('#tb tr').addClass("card")
it didn't worked, returns each row on top of each other
I want results like this:

      
        
          title
          price
          discount
          image
        
      
      
        
          PRODUCT 1
          24.43
          53
          https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg
        
        
          PRODUCT 2
          50.27
          70
          https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg

user_10508498 · Answer

It's pretty hard to take HTML code and use javascript to convert that into some other complicated format. If you want to do everything manually, you can make the cards by hand with HTML. However, I suggest using a database and PHP to programmatically create those cards or tables with the data in the database.

Here is some information about how to create those Bootstrap cards: https://getbootstrap.com/docs/4.0/components/card/

Here is some information about how to use databases and PHP to create those cards automatically: https://www.phpzag.com/create-bootstrap-cards-with-php-and-mysql/

user_11249534 · Answer

The thing which you are trying to achieve makes no sense. I myself came across this dilemma of converting a table into a card but after some quick search I got to know, this makes no sense. Think of it like transformers. Table and card are two different transformers and they cannot be converted into each other until and unless we you brute force.

user_1937507 · Answer

You can convert the table into cards. I have done this in the WordPress admin tables. Though I have not done it into bootstrap.

Here is a way to do with straight CSS.

First remove the table header and footer (if you have one).

thead, tfoot {
  display: none;
}

Then remove the background of the table

table {
  background: none !important;
  border: none !important;
}

Change your rows so that they display as a card:

make them inline-block so they will appear on the same row but as a full container

add a background, border, padding and shadow to style it

tr {
   display: inline-block;
   padding: 1rem 0.5rem 1rem 0.5rem;
   margin: 1.5rem;
   border: 1px solid grey;
   border-radius 10px;
   box-shadow: 0 0 10px;
 }

Make the cells appear on their own rows

td {
  display: block;
}

If you want to add labels to the cell data you can use ::before and use a specific CSS attribute selector. For example, in my WordPress admin tables the column names are added to each cell with the attribute "data-colname".

td[data-colname="Guardian"]::before {
  content: "Guardian :";
}

Here is an example of my WordPress table as cards:

(And as you can imagine, you can't easily alter a WordPress admin table -- you work with what you get).

user_7052927 · Answer

Don't need to write single line of CSS code for hide thead or tfoot. first you need to know about replaceWith() method in jQuery & replace() method in JavaScript. So just pull the table contents as a string and run a simple string replace. And add Bootstrap classes as you want for card design.

Helpful Links
https://stackoverflow.com/a/9230045/7052927

https://api.jquery.com/replacewith/

https://www.w3schools.com/jsref/jsref_replace.asp

$(document).ready(function () {
    $("#tb thead, #tb tfoot").remove(); //Remove element
    $("#tb").find('td').removeAttr("align"); // Remove attribute
    
    $('#tb').replaceWith($('#tb').html()
        .replace(/  /gi, "

")
        .replace(//gi, "

")
        .replace(/<\/tbody/gi, "<\/div")
    );

    // each loop for card layout
    $("#tb .card").each(function() {
        $(this).find('.card-body div:first-child').addClass('h6 fw-bold text-primary'); // Change product style
        var imgPath = $(this).find('.card-body div:last-child');
        $(this).find('.card-body').before(`
            
                
            
        `);
        imgPath.remove() // After pick text then remove 
    });
});





  
    
        
            title
            price
            discount
            image
        
    
    
      
        PRODUCT 1
        24.43
        53
        https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg
      
      
        PRODUCT 2
        50.27
        70
        https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg

convert rows of html table into bootstrap cards

4 Answers