CODEWITHSUNDEEP
htmlcsshtml-table
Rob Audenaerde
Rob Audenaerde

Reputation: 20019

CSS table reshape to 2-columns

I have a table in html, containing this structured data:

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  ...
</table>

This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:

<table>
  <tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
  ...
</table>

So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.

Any hints?

UPDATE:

This trick will do it, but destroys the table-layout, so not usable.

TABLE TR
{
    float:left;
}
TABLE TR:nth-child(2n+1)
{
    float:left;
    clear:both;
}

Upvotes: 1

Views: 8261

Answers (1)

Learner
Learner

Reputation: 4636

Try out and let know is that you want?

Your Html

<table>
  <tr><td>label1</td><td>value1</td></tr>
  <tr><td>label2</td><td>value2</td></tr>
  <tr><td>label3</td><td>value3</td></tr>
  <tr><td>label4</td><td>value4</td></tr>
  <!-- more stuff here -->
</table>

CSS:

tr {
  float: left;
}

tr:nth-child(2n+1) {
  clear: left;
  padding-right: 10px; /* You can edit this line and add as per your style */
}

Works fine in Chrome, Safari, Firefox. Not checked in IE

Example

Upvotes: 5

Related Questions