Add css to format table into grid

So in my php file, the groups are listed from top-bottom. I want to list them from left-right, and then like start the next row, so they are all in a grid format displayed nicely across the page. How can i add html/css to do this? this is what I have right now

Object.keys(cats).forEach(function(Group) {

      let html = '';



      // Append the 'category' header



      html = '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';

      $('table').append(html);





      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {



        var names = element.names;



        var img = "<img src=' " + randomImage+ " ' />";



        html = '<tr>';

        html += '<td><p>' + names + '</p></td> ';



        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

        $('table').append(html);



      });



    });



    });



    </script>



    </body>



    <table> </table>

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

1

Why don't you use display: flex or css grids instead of using a table?

– iMac Ange
Nov 26 '18 at 10:41

May I recommend mustache as a separation of HTML and Javascript?

– Diogo Santo
Nov 27 '18 at 23:43

@encrypt in regards the question you deleted, you could use base64_encode inside your while for the photo and then on your javascript code that uses the photo use data:image/png;base64 to display it.

– Prix
Nov 29 '18 at 22:29

@prix Hey can you expand on this please? So I think that the $table can't just store "photo"=> $photo, so how do I insert it into the table?

– encrypt
Nov 29 '18 at 22:31

add a comment |

Object.keys(cats).forEach(function(Group) {

      let html = '';



      // Append the 'category' header



      html = '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';

      $('table').append(html);





      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {



        var names = element.names;



        var img = "<img src=' " + randomImage+ " ' />";



        html = '<tr>';

        html += '<td><p>' + names + '</p></td> ';



        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

        $('table').append(html);



      });



    });



    });



    </script>



    </body>



    <table> </table>

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

1

Why don't you use display: flex or css grids instead of using a table?

– iMac Ange
Nov 26 '18 at 10:41

May I recommend mustache as a separation of HTML and Javascript?

– Diogo Santo
Nov 27 '18 at 23:43

@encrypt in regards the question you deleted, you could use base64_encode inside your while for the photo and then on your javascript code that uses the photo use data:image/png;base64 to display it.

– Prix
Nov 29 '18 at 22:29

@prix Hey can you expand on this please? So I think that the $table can't just store "photo"=> $photo, so how do I insert it into the table?

– encrypt
Nov 29 '18 at 22:31

add a comment |

Object.keys(cats).forEach(function(Group) {

      let html = '';



      // Append the 'category' header



      html = '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';

      $('table').append(html);





      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {



        var names = element.names;



        var img = "<img src=' " + randomImage+ " ' />";



        html = '<tr>';

        html += '<td><p>' + names + '</p></td> ';



        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

        $('table').append(html);



      });



    });



    });



    </script>



    </body>



    <table> </table>

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

Object.keys(cats).forEach(function(Group) {

      let html = '';



      // Append the 'category' header



      html = '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';

      $('table').append(html);





      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {



        var names = element.names;



        var img = "<img src=' " + randomImage+ " ' />";



        html = '<tr>';

        html += '<td><p>' + names + '</p></td> ';



        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

        $('table').append(html);



      });



    });



    });



    </script>



    </body>



    <table> </table>

javascript html css html5

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

edited Nov 29 '18 at 17:40

Javier Larroulet

1,3881416

asked Nov 24 '18 at 1:52

encrypt

741112

asked Nov 24 '18 at 1:52

encrypt

741112

asked Nov 24 '18 at 1:52

encrypt

741112

1

Why don't you use display: flex or css grids instead of using a table?

– iMac Ange
Nov 26 '18 at 10:41

May I recommend mustache as a separation of HTML and Javascript?

– Diogo Santo
Nov 27 '18 at 23:43

@encrypt in regards the question you deleted, you could use base64_encode inside your while for the photo and then on your javascript code that uses the photo use data:image/png;base64 to display it.

– Prix
Nov 29 '18 at 22:29

@prix Hey can you expand on this please? So I think that the $table can't just store "photo"=> $photo, so how do I insert it into the table?

– encrypt
Nov 29 '18 at 22:31

add a comment |

1

Why don't you use display: flex or css grids instead of using a table?

– iMac Ange
Nov 26 '18 at 10:41

May I recommend mustache as a separation of HTML and Javascript?

– Diogo Santo
Nov 27 '18 at 23:43

@encrypt in regards the question you deleted, you could use base64_encode inside your while for the photo and then on your javascript code that uses the photo use data:image/png;base64 to display it.

– Prix
Nov 29 '18 at 22:29

@prix Hey can you expand on this please? So I think that the $table can't just store "photo"=> $photo, so how do I insert it into the table?

– encrypt
Nov 29 '18 at 22:31

Why don't you use display: flex or css grids instead of using a table?

– iMac Ange
Nov 26 '18 at 10:41

May I recommend mustache as a separation of HTML and Javascript?

– Diogo Santo
Nov 27 '18 at 23:43

@encrypt in regards the question you deleted, you could use base64_encode inside your while for the photo and then on your javascript code that uses the photo use data:image/png;base64 to display it.

– Prix
Nov 29 '18 at 22:29

@prix Hey can you expand on this please? So I think that the $table can't just store "photo"=> $photo, so how do I insert it into the table?

– encrypt
Nov 29 '18 at 22:31

add a comment |

4 Answers
4

active

oldest

votes

+50

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{

  width: 33%;

  float: left;

}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {

      let html = '';



      //add the table opening tag to the html variable

      html += '<table>';

      //Append the 'category' header

      html += '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';



      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {   

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html += '<tr>';

        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

      });

      //add the table closing tag to the html variable

      html += '</table>'; 

      //now that our html variable contains the table html for this group we append it to the tables_container

      $('#tables_container').append(html);

});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

answered Nov 26 '18 at 5:46

Sarah

1,127922

add a comment |

You will want to tweek this - I used an example from W3Schools. It will give you 3 columns wrapped together into one row. The columns will collapse into one with the items stacked on top of eachother if the screen is too small for all three columns. (run the snippet and see it in action) I set this up with cards, which you could eliminate (should you choose to do so). Adjust it as neccessary, then set up the corresponding html elements in your javascript. Hope this helps!

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

add a comment |

First of all, your heading column in the first row should span to 2 to match the second row.
Is this what you are looking? Run the snippet.

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

add a comment |

You can do something like this.

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

answered Nov 26 '18 at 2:53

sridhar reddy

57028

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454533%2fadd-css-to-format-table-into-grid%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

+50

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{

  width: 33%;

  float: left;

}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {

      let html = '';



      //add the table opening tag to the html variable

      html += '<table>';

      //Append the 'category' header

      html += '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';



      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {   

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html += '<tr>';

        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

      });

      //add the table closing tag to the html variable

      html += '</table>'; 

      //now that our html variable contains the table html for this group we append it to the tables_container

      $('#tables_container').append(html);

});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

answered Nov 26 '18 at 5:46

Sarah

1,127922

add a comment |

+50

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{

  width: 33%;

  float: left;

}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {

      let html = '';



      //add the table opening tag to the html variable

      html += '<table>';

      //Append the 'category' header

      html += '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';



      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {   

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html += '<tr>';

        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

      });

      //add the table closing tag to the html variable

      html += '</table>'; 

      //now that our html variable contains the table html for this group we append it to the tables_container

      $('#tables_container').append(html);

});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

answered Nov 26 '18 at 5:46

Sarah

1,127922

add a comment |

+50

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{

  width: 33%;

  float: left;

}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {

      let html = '';



      //add the table opening tag to the html variable

      html += '<table>';

      //Append the 'category' header

      html += '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';



      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {   

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html += '<tr>';

        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

      });

      //add the table closing tag to the html variable

      html += '</table>'; 

      //now that our html variable contains the table html for this group we append it to the tables_container

      $('#tables_container').append(html);

});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

answered Nov 26 '18 at 5:46

Sarah

1,127922

As I was suggesting in my comments you could create a table for each group (in your for loop) and append them to a div with id='tables_container'.

Then in CSS set the width of the tables to be 33% and float them left as follows:

CSS

table{

  width: 33%;

  float: left;

}

JavaScript/JQuery

Object.keys(cats).forEach(function(Group) {

      let html = '';



      //add the table opening tag to the html variable

      html += '<table>';

      //Append the 'category' header

      html += '<tr>';

      html += '<td><h1>'+"Group"+ Group+'</h1></td>';

      html += '</tr>';



      // Loop through the results for this 'category'

      cats[Group].forEach(function(element) {   

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html += '<tr>';

        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';

        html += '</tr>';

      });

      //add the table closing tag to the html variable

      html += '</table>'; 

      //now that our html variable contains the table html for this group we append it to the tables_container

      $('#tables_container').append(html);

});

HTML

Instead of having <table> in your html document you would have a container for the tables.

<div id="tables_container"></div>

answered Nov 26 '18 at 5:46

Sarah

1,127922

answered Nov 26 '18 at 5:46

Sarah

1,127922

answered Nov 26 '18 at 5:46

Sarah

1,127922

answered Nov 26 '18 at 5:46

Sarah

1,127922

add a comment |

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

add a comment |

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

add a comment |

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

<style>

* { box-sizing: border-box; }



.column {

    float: left;

    width: 30%;

    padding: 0 10px;

    }

 

 .row { margin: 0 10px; }

 

.row:after {

    content: "";

    display: table;

    clear: both;

    }

    

.card {

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

    padding: 10px;

    text-align: center;

    background-color: #F1F1F1;

    }

    

@media screen and (max-width: 600px) {

    .column {

        width: 100%;

        display: block;

        margin-bottom: 15px;

    }

}        

</style>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



</head>

<body>



<h2>Responsive Column Cards</h2>

<p>Resize the browser window to see the effect.</p>



<div class="row"><!-- stretches across page -->

    <div class="column"> <!-- 1 of 3 -->

        <div class="card">

            <h1>Group 1</h1>

            <p><img src =""> name</p>

        </div>

    </div>

    

    <div class="column"> <!-- 2 of 3 -->

        <div class="card">

            <h1>Group 2</h1>

            <p><img src =""> name</p>

        </div>

    </div> 

    

    <div class="column"> <!-- 3 of 3 -->

        <div class="card">

            <h1>Group 3</h1>

            <p><img src =""> name</p>

        </div>

    </div>    



</div> <!-- end of row -->



</body>

</html>

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

edited Nov 26 '18 at 5:43

answered Nov 26 '18 at 5:17

elbrant

454211

answered Nov 26 '18 at 5:17

elbrant

454211

answered Nov 26 '18 at 5:17

elbrant

454211

add a comment |

First of all, your heading column in the first row should span to 2 to match the second row.
Is this what you are looking? Run the snippet.

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

add a comment |

First of all, your heading column in the first row should span to 2 to match the second row.
Is this what you are looking? Run the snippet.

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

add a comment |

First of all, your heading column in the first row should span to 2 to match the second row.
Is this what you are looking? Run the snippet.

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

First of all, your heading column in the first row should span to 2 to match the second row.
Is this what you are looking? Run the snippet.

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

table tr > *{

  display: block;

}

table tr {

  display: table-cell;

}

<table>

  <tr>

    <td colspan="2"><h1>Group 1</h1></td>

  </tr>

  <tr>

    <td><p>Name 1</p></td>

    <td><p>IMG</p></td>

  </tr>

</table>

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

answered Nov 26 '18 at 2:23

Ramesh Navi

353515

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

add a comment |

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

No, so bascially, I like the format I have right now, it's just that I want the different groups to be beside each other, left to right, insted of top to bottom. so like 3 of them on the first row. then 3 below those 3, etc. Because I might have over 10 groups and scrolling vertical is annoying

– encrypt
Nov 26 '18 at 2:45

add a comment |

You can do something like this.

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

answered Nov 26 '18 at 2:53

sridhar reddy

57028

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

|
show 2 more comments

You can do something like this.

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

answered Nov 26 '18 at 2:53

sridhar reddy

57028

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

|
show 2 more comments

You can do something like this.

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

answered Nov 26 '18 at 2:53

sridhar reddy

57028

You can do something like this.

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

<table>

  <tr>

    <td>

      <h3>

        Group1

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

  <tr>

    <td>

      <h3>

        Group2

      </h3>

    </td>

  </tr>

  <tr>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

  <td>

    <table>

      <tr>

        <td>Image</td>

      </tr>

      <tr>

        <td>

          Text

        </td>

      </tr>

    </table>

  </td>

</tr>

</table>

answered Nov 26 '18 at 2:53

sridhar reddy

57028

answered Nov 26 '18 at 2:53

sridhar reddy

57028

answered Nov 26 '18 at 2:53

sridhar reddy

57028

answered Nov 26 '18 at 2:53

sridhar reddy

57028

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

|
show 2 more comments

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

so I like the image and text format you did, but agian, I need the group1 and group2, to be BESIDE each other left-right. So the exact same thing you did here but 3 groups should be in the same row. SO imagine a 3x3 grid if i had 9 groups

– encrypt
Nov 26 '18 at 2:56

Since the data is dynamic it would be a little harder to maintain something that you are looking for.

– sridhar reddy
Nov 26 '18 at 3:10

it's just being pulled from the DB, can't i just re-arrange the tr or td or add some css? like my goal is to just have the groups being displayed on the whole page Right now they are just top-bottom on the left side, the whole right side of the page is empty

– encrypt
Nov 26 '18 at 4:10

@encrypt i have two ideas. 1. you could create a table for each group and append them to a div with id='table_wrapper'. Then in css set the width of the tables to be 33% and float them left. Css code: float: left; .. you'd need to put css on the table_wrapper to be overflow:hidden; so that the floats are rendered... my other idea is more complicated and it involves giving a unique id to each table row. I will have to get back to you tomorrow with that one as its 4.a.m here. Lol

– Sarah
Nov 26 '18 at 4:32

Yeah so I tried creating a table for each group but I'm unable to figure out how to seperate the groups in my code above. In my code above, each element is a <tr> so the Group1 is a tr, the name+image is another tr, and its just a huge list of TR. I want to create blocks for each group so I need to seperatre the different groups. How can I do that in my for loops so far. Btw cats is an object, so it would have like array[0] : 0: group#:1, name=firstname1, etc . array[0]: 1 : group#1, firstname2, etc

– encrypt
Nov 26 '18 at 4:39

|
show 2 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg

Add css to format table into grid

4 Answers
4

CSS

JavaScript/JQuery

HTML

Your Answer

Post as a guest

4 Answers
4

4 Answers
4

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

Add css to format table into grid

4 Answers 4

CSS

JavaScript/JQuery

HTML

Your Answer

Sign up or log in

Post as a guest

Post as a guest

4 Answers 4

4 Answers 4

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

CSS

JavaScript/JQuery

HTML

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen

4 Answers
4

4 Answers
4

4 Answers
4