CODEWITHSUNDEEP
htmlcsshtml-table
Richard Jones
Richard Jones

Reputation: 45

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.

Upvotes: 0

Views: 78

Answers (2)

Jon P
Jon P

Reputation: 19797

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.

Upvotes: 2

Rounin
Rounin

Reputation: 29511

In an HTML table, the data-cells (nested inside the rows) line up horizontally, and the rows (containing the data cells) then stack vertically.

So... is this the kind of thing you are looking to achieve:

table {
border: 2px solid black;
border-bottom-width: 4px;
}

td {
width: 150px;
padding-left: 1cm;
border: 1px solid black;
}
<table>
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
  
<tr>
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
  
<td>
Member Id: {mbrid} <br />
Username: {un} <br />
Name: {name} <br />
email: {email} <br />
Status: {status} <br />
Referrer: {referrer} <br />
Options: <br />
{options} <br />
</td>
</tr>
<table>

Upvotes: 1

Related Questions