How to create a table using multiple span in one div using CSS


Tags: html,css

Problem :

I got the following problem.

I am trying to create 2 columns using span with multiple rows inside a div. I am able to get the 2 columns but not not multiple rows.

The HTML code can't be changed.

span{
  display: inline-block;
}
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after  {
  content: '\A';
  white-space: pre;
}
.totalAmount, .oldTotal, .totalDue{
  float: left;
}
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{
  float: right;
}
<div class="payment-breakdown">
  <span class="totalAmount">Total:</span>
  <span class="totalAmount-dd">100USD</span>
  <span class="oldTotal">Previously paid:</span>
  <span class="oldTotal-dd">50USD</span>
  <span class="totalDue">Amount Due:</span>
  <span class="totalDue-dd">50USD</span>
</div>

Can someone guide me what I am doing wrong please?



Solution :

You could remove the whole css of your own and solve it using this simple css snippet:

.payment-breakdown span{
  display: block;
  width: 50%; 
  float: left;
}

JSFIDDLE DEMO

You can style each column using the pseudo selectors nth-child(odd) and nth-child(even).

JSFIDDLE DEMO WITH STYLED COLUMNS


    CSS Howto..

    How can I increase the size of twitter bootstrap carousel navigation arrows

    How to use psd elements in an upload form? [closed]

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How to keep line breaks when using .text() method for jQuery?

    How to use sprite css [duplicate]

    How to add new property within existing css?

    How to create an interactive circular links using CSS [closed]

    Div doesn´t show background color after float:left

    how to show css text in html div

    How do I centralize an ordered list?

    How to Slide or Move this Set of Divs

    How to center two pieces of text using CSS and Bootstrap?

    How to target all divs of the same class except for hovered over div?

    Css code how to create multiple div classes

    How to write css rule that run with a special browser?

    How to add left border with image(s) dynamically

    How to create an Hours of Operation list with HTML and CSS?

    How compatible is the new Microsoft edge browser? [closed]

    How to show divs inline. css html

    How to use background css for an image not in the Content or Resource folder

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    How to create a frosted glass effect using CSS?

    how to get the site to not collapse with css

    How to make content of invisible except for the left column?

    How to reference / link to a Css-File styling elements in a webview for Android

    How do I set the table cell widths to minimum except last column?

    CSS Sub Menu shows up outside body

    How to create a relative inline style?

    How to add a style to