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..

    HTML+CSS: How to force div contents to stay in one line?

    How to test a CSS parser?

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How to create and manage large CSS projects?

    jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element

    how to prevent transformation of text inherited from a skewed parent

    How to add an anchor tag to a block of html?

    How to overlay two fonts with css

    How to wrap lines in an inline-block with CSS?

    How to change ol bullets for clickable images

    How to align text vertically

    How to redefine CSS classes with Javascript

    How can I toggle between multiple .css with jquery?

    How to align buttons below and right-aligned to a HTML list?

    User agent, how to have diferent css files for diferent devices automaticly

    How to remove background from breadCrumb

    How to use z-index to make an element overlap another element in CSS

    How can I create this specific layout using html and css?

    How to make all elements in one line?

    How do I get the tooltip background to extend or grow as I input more text?

    Rails 4: How to style navigation for current page using jQuery

    how to apply CSS styles in current document recieved from AJAX request?

    How to get background colors with fullCalendar and Bootstrap

    How do I center text vertically with css [duplicate]

    Since KB2898785 IE6 doesn't load locally-sourced CSS for a page delivered remotely--how to correct?

    How To Vertically Center Text Over Responsive Video

    How to put an image at the left side of text without putting the image into css

    How to ensure broswer does not cache my JS/CSS [duplicate]

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    My sidebar is not going to right of my page, but to my left. How do I fix this?