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 apply css on dynamic loaded html content (jquery mobile+backbone+phonegap)

    How to make a space between tags (icons) in table?

    How to make a multi category filter with JQuery, HTML and CSS

    How does one target IE7 and IE8 with valid CSS?

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to fade out text on top of semi-transparent div using CSS?

    How to override css attribute-only style

    how to avoid overlapping of text

    How to get a button to fill the full width of the footer in Mobile View?

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    How to create dropdown with multiple columns?

    How To Turn JS Objects To HTML And Style With CSS

    simplest slideshow using html, css toggling visibility of each div tag

    How can I vertically center this css/javascript based modal dialog?

    How to spread a div to cover available space in a parent container?

    How can I change the number of columns in the product list?

    How to center nested divs with rotation with CSS3?

    How to put horizontal dropdown menu bar

    Why the input box is showing so different on Ipad but not on chrome

    How to get css3 ribbon on both sides of element

    Bootstrap tooltip showing behind modal window

    How to use a variable in my href path in html

    How to create new line with css or javascript?

    How to apply css to three different classes hovering one of them

    How to use more times css transform property?

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    How to make text-overflow with ellipsis work with long strings that have no breaks

    how to set zoom level using css

    How to Apply CSS to element added by Javascript

    How to align radio buttons inside a DIV?