Richard Jones Richard Jones - 4 months ago 7
HTML Question

with html tables, using css, how do I get the tables next to each other?

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.

Answer

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:10px;
  width:150px;
}

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

Comments