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;
}
You can style each column using the pseudo selectors nth-child(odd)
and nth-child(even)
.
JSFIDDLE DEMO WITH STYLED COLUMNS
CSS Howto..
I've gone an easier way. I've used this code to obtain root path relative to a current item: rootPath :: Compiler String rootPath = (toSiteRoot . fromJust) <$> (getUnderlying >>=...
After fiddling with the code for a bit, I figured it out. I didn't have a space between the border solid and the color code. This: border: 1px solid#FFFFFF; Needed...
You can set a variable of $menu-icon-items:"\f007","\f07c","\f1fa"; and loop through using its length, see example here: HTML <div class="menu-item1">1</div> <div class="menu-item2">2</div> <div class="menu-item3">3</div> SCSS $menu-icon-items:"\f007","\f07c","\f1fa"; @for $i from 1 through...
$('.t1, .t2').click(function(e){ e.stopPropagation(); //prevent the event from bubbling up $(this).slideUp(); }); This would work - however, your idea/markup/execution is flawed. There is no .t1 to click as it's made up...
In order for .show() to work, surely you must hide the buttons first! Working fiddle (the only change is that .munchbutton is now display: none; by default) Let me know...
your css file should be this: .weekly-view { clear: both; list-style: none; } .weekly-view .hours { list-style: none; margin: 0; padding: 0; } .weekly-view .hours li { width: 13.857142857%; }...
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just...
Try: <link href="{{asset('css/main.css')}}" rel="stylesheet"> OR <link href="{{url('css/main.css')}}" rel="stylesheet"> OR If you are using php artisan serve its possible that your public folder is not being used, so use PHP native...
1: Format your css please. 2: That code seems to be missing the bits that actually make it work? Now as for the answer: General concept: you should set the...
It is currently not possible to format a tooltip. An alternative solution is to use one of the many open source projects that allow for custom HTML based tooltips and...
Float one or both inner divs. Floating one div: #wrapper { width: 500px; border: 1px solid black; overflow: hidden; /* will contain if #first is longer than #second */ }...
I just had to mess around with paddings and what not for a while. Got it eventually. Thanks for the help.
There is a CSS Property called "word-break" which you may find useful: div { background: red; width: 200px; height: 200px; word-break: break-all; } Reference: W3Schools word-break information...
There is the HTML5 spellcheck attribute. <textarea spellcheck="false"> or <input type="text" spellcheck="false"> ...
This would be a quick workaround. You should put both the .tip div and the input into a wrapping div.
The <h1> and <footer> tags have different standard styling. Change your footer to this to make them look the same: footer{ background-color: lightgrey; width: 100%; padding: 25px; border: 25px solid...
You can apply a global margin and simply reset the last one (or first one) iframe { margin-left:20px; } iframe:first-child { margin-left:0; } ...
You can achieve this using CSS' + next sibling selector. .odd { color: red; } .even{ color: blue; } tr.odd + tr.even td { padding-top: 20px; } tr.even + tr.odd...
You should use overflow:hidden; attribute on img_nav_individual. That will help here is your example : http://jsfiddle.net/6wPvW/
You can apply these styles to the anchor to make it block-level, assign a width, and then adjust its margins like this: a.read{ display:block; width:100px; margin:0 auto; } Or apply...
Vishal provided the reason for the hover effect not working - this is my addition to it: - focus only fires on the textarea, but you want to change the...
You can use CSS3's :not() selector. For example, in style2.css, you would write: select:not(#select1) { // styling here will be applied to all selects except select1 } But in reality...
Added css: #component>div{height:100%;} #component>div:first-of-type{border-radius:30px 0 0 30px;} #component>div:last-of-type{border-radius: 30px;} Edit in js: $('#component').children().not(':last').each(function () { What happens: The last div will not float left, and will just fill the space...
Not too difficult to get what you're asking for as far as the display. You can use float: left; or display: inline-block; I have included a fiddle with an example...
I think the selector you are looking for is #tab1:hover > .tabcontent Try updating .tabcontent to .tabcontent{ display: none; position: absolute; padding:10px 0 0 40px; background:#fff; border:1px solid #000; left:0;...
Perhaps the CSS property user-select ? cross-browser : -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; Doc : http://www.w3.org/TR/2000/WD-css3-userint-20000216.html#user-select Perhaps you could add the following listeners to the...
here you go: .col-sm-6:first-child:after { height: 0; } jsBin demo...
Possible, but all those nested divs make it really ugly : .body.entry-content div:first-child div:first-child div:first-child .sqs-block-content > p:first-child{ background-color:blue; } .body.entry-content div:first-child div:first-child div:first-child .sqs-block-content div img:first-child { margin:-14px -14px...
Your styles are overwritten by Bootstraps navbar styles. Use higher specificity to make your styles apply to the navbar-brand, e.g. with .navbar-header .navbar-brand { height: 100px; } This way you...
Basic answer is to apply height: 100% to every element you want stretched. You have to remember to give each parent element a height of 100% as well, like #contentWrapper...