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 use a CSS sprite for a Repeating background image?

    How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

    How to resize image automatically on browser width resize but keep same height?

    How do I format text to wrap onto a second line using bootstrap?

    How to change line height for small text with CSS? There seems to be a limit to how small line-height can be

    Css Trick - How to align this div

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    how to middle vertical-align using bootstrap input-group

    How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

    How to show the width of an element in the content of an ':after' pseudo-element?

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to get CSS in Javascript working correctly

    HTML CSS, how to create a Side bar or column

    How to add styles programmatically?

    Showing divs in th on the same line

    CSS - how to fix the hover?

    How to remove default CSS from TextField in flex?

    Z-index issues - How to bring a child element onto the parent's below element?

    How to change style of a table in a chrome extension?

    How to include a custom CSS file in TYPO3

    Bootstrap - how to make the image being scaled down to fit the window height?

    How to get two HTML section blocks align in CSS?

    How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)

    Responsive CSS layout - how to stretch the background overlay

    How to solve outlook client css layout change properties?

    How to check “IF any one or all buttons are clicked” in jquery

    How do I to adjust the identation [closed]

    How to scale canvas and keep its position on screen?

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?