With html tables, using CSS, how do I get the tables next to each other?


Tags: html,css,html-table

Problem :

I am creating a pull from a database when searching it... I don't know how many results there will be, so I want to have them listed in a table, like this:

[user info, about 4 to 8 lines long] [user info, about 4 to 8 lines long] [user info, about 4 to 8 lines long]

and have it naturally push rows down the page as they cannot keep going wider, so if it can fit 2 or 3 together, based upon the width of the browser, then it can, but when no more fit, then start a new line...

I cannot figure out how to do it.

I have the table like this:

<table align="left" width="150" style="width: 150px; border-style: solid; border-color: {bordercolor}; border-width: 2px 2px 4px 2px;">
<tr>
    <td align="left" style="padding-left: 1cm;">
Member Id: {mbrid} <br />
<br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
 <br />
    </td>
</tr>
<table>

Then all the data in {} are replaced by php.

but those are going down the page, and none next to each other.

So can you tell me what I did wrong?

Oh, by the way, this is just an admin function, so I did not care about the design being amazing... I guess maybe I should in case we ever sell the business? hmm. Food for thought.



Solution :

I would either use the table as a table with columns for Member ID, User Name etc, or as you a representin a list of users, I'd use a list

.memberInfo
{
  list-style-type: none;
  padding:none;
}

.memberInfo li
{
  float:left;
  padding:5px;
  margin:5px;
  width:150px;
  border-bottom: solid 1px black;
}

.memberInfo .label
{
  font-weight:bold;
}

.memberInfo .options
{
  display:block;  
}
<ul class="memberInfo">
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>

  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
  <li>
    <div><span class="label">Member Id:</span> {mbrid}</div>
    <div><span class="label">Username:</span> {un}</div>
    <div><span class="label">Name:</span> {name}</div>
    <div><span class="label">email:</span> {email}</div>
    <div><span class="label">Status:</span> {status}</div>
    <div><span class="label">Referrer: </span> {referrer}</div>
    <div><span class="label options">Options:</span>
      {options}</div>
  </li>
</ul>

Using a list will get you better flow on different screen sizes and more flexibilty for media query etc. You can then change the CSS to flex box easily if required.

I've replace <br /> with <div> as it is more semantic and gives greater styling options.


    CSS Howto..

    How to reset default button style in Firefox 4 +

    How to change elevation property of paper-card?

    How to cover piece of border with element over it?

    How to debug HTML/CSS for iPhone/iPad performance?

    How to put
      around image in css

    Taking var with JS prompt - how can I make it through HTML form?

    How can I make width flexible with CSS when using bootstrap's responsive design?

    jQuery addClass based on how far scrolled

    How do align texts in the child div

    How to make a div tag without margins in css? [duplicate]

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    How to render a template with dynamic CSS?

    How to center checkbox vertically in a table-cell?

    How to style a

    inside a div with css [closed]

    How to use sass (scss) compared to css

    How to accomplish this layout in HTML/CSS?

    CSS: How to put content between header and footer

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    How to change default value in counter-increment?

    How to pull all CSS rules on an element together

    How can my website store strings locally? [closed]

    How to make image appear upon hover over text using css?

    How to prevent division when using variables separated by a slash in CSS property values

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to center this on screen

    How center an absolute element (img) that's wider than its parent div?

    How to reverse a CSS animation on unchecked state?

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How can I get this css to display correctly in Chrome?

    how to open a menu with a button?in html