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 to relativize URLs in css files in Hakyll?

    Outlines and Borders not showing at all in IE

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to select lowest level ul in nested ul in Javascript/ css

    How do I get a button to show on mouseover using jQuery?

    How to line up lists side by side?

    How NOT to combine all CSS into one file with SASS and bootstrap

    How to include CSS in laravel 5 running with artisan?

    How do I keep dropdown menus the same width of top level categories with auto width

    How to format a title attribute with css (setting more width)?

    How to place two divs next to each other?

    How do I get my link background to go beneath it during hover?

    How to display a long link in multiple lines via CSS?

    How to turn off spell checking in CSS?

    How align div to a form field?

    HTML/CSS: How to create a box for the footer?

    How to add space between elements (but not outside of them) using CSS?

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    How to make image clipping in css

    How do I center a button in html5?

    How to apply :hover on :after to certain div in CSS

    How to manually apply styles from particular style sheet to an element?

    CSS: how to make children fit parent's width

    How to Achieve Word Wrap Effect With Children Divs

    How to change text in the same area when hover over images with CSS?

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to remove pseudo-element styles from the first element?

    How do I go about targeting the literal “first-child” of a div, styling depending on element type

    How to make Bootstrap navbar brand image larger

    How to get equal height for all sections?