HTML structure
I've got the following html structure: This is a fixed structure that I can't edit
<div class="separator"></div>
<table class="myClass">
<thead>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
</thead>
...
</table>
<div class="separator"></div>
CSS
The first and last div are separators whose css is:
.separator {
height: 20px;
background-color: gray;
}
Note that separators are complex widgets and not only design (I've intentionnaly simplified the example)
The problem
I want to position the table header before the first separator but the table body must remain between the two separators.
What I have tried
Here is the initial jsfiddle for testing:
http://jsfiddle.net/prhgW/1/
I've tried to position absolute the thead tag and use negative top
values but when doing so, the width of the thead is smaller than
100% of the table and so column titles are misplaced regarding the
column value. the fiddle: http://jsfiddle.net/prhgW/2/
I've also tried to put the width at 100% but the tr tag do not
follow that rules : http://jsfiddle.net/prhgW/3/
Additional rules
I would like to avoid fixed width/height of the table or any element (so, absolute positioning everything is not acceptable solution)
I would like cross browser compatibility
avoid javascript fix (pure css would be better)
Is this applicable to your problem?
http://jsfiddle.net/prhgW/16/
I added some space beneath the <th> and shifted the first separator down. This works if you know the height of the separator AND the <th>.
I've been toying with this in pure CSS, here's my forked fiddle.
Basically, I use the immediate sibling combinator .separator + .myClass to target the table following the separator. I then move the whole table up so the headers line up just above the separator. This move is compensated with an identical margin-bottom so the content below the table neatly follows the table. Finally, I put some padding on the header cells in thead to push tbody below the separator.
Possible caveats:
The separator height needs to be fixed and known. This is probably not too much of a problem.
The height of the headings needs to be fixed and known. I used 1em as default.
If there is content right above the separator, it may be overlapped by the table. This is inherent to the problem: you can't conditionally apply more padding to the separator. You can target a table following a separator, but you can't target a separator which is followed by a table. The sibling combinator only works for elements following a previous sibling, not the other way around.
If all you want is a gray line below the Table title and below the last row, you can use css border property to set the style as in here
http://jsfiddle.net/vzGtF/
I have removed the seperator class and the div using the classes.
Hope the helps.
I used a little bit of jquery to append a row below the titles of your table.
<script>
$(document).ready(function(){
$('.myClass thead').append('<tr><td class="separator" colspan=2></td><tr>');
});
</script>
Related
I made a calendar in html and css.
I have individual td for each 30 mins time span.
But i want to create 30 divs inside that td for each minute.
Right now its showing like this :
http://jsfiddle.net/mausami/FHfjL/1/
but i want to display each div in one line.
to show each div i have written ' in each div.
the divs are like this :
<div style="display:inline-block; clear:both; width:0.1%;" class="08:00">'</div>
Can anybody please help me ?
First, a few important improvements to your code.
Class names cannot start with a number.. Quick fix is to append some string to the beginning of them - I used "min_".
You have the same id multiple times. An id should only be used once.
Move all of your styles external - sop doing inline, it's hard to update.
You're not floating anything so you don't need clear:both;
Here's the same thing you have, but pretty code: http://jsfiddle.net/daCrosby/FHfjL/7/
Now, your question. "[how do I] display each div in one line?" I'm not quite sure if you want each div to be in one line (30 lines total), or each div to be in the same line (only 1 line total). So here's both ways:
To display each div on it's own line:
.tbDay div{
display:block;
}
http://jsfiddle.net/daCrosby/FHfjL/8/
To display all 30 in one line:
.tbDay div{
display:inline-block;
width:3.333333%; /* 100% divided by 30 divs */
margin-left:-4px;
}
Note the margin-left:-4px;. This is a fix for the spacing between inline-block elements as discussed here.
http://jsfiddle.net/daCrosby/FHfjL/9/
If you want to use those div to show time passing by,
you could use a gradient and % in background or even better <meter></meter> .
http://www.w3.org/wiki/HTML/Elements/meter
You can easily from js or server side script fill the right value to update your calendar.
cheers
You're displaying the minute div as display:inline-block
Change this to block or remove it completely. Also consider using a list instead of divs.
EDIT
The answer above assumed "each div in a new line" meant one minute div = one new line
As per clarification in the comments below, to make all divs within the td appear in one line, apply a white-space:nowrap
e.g. insert the following into the css portion of your fiddle:
#tblDay td{
white-space:nowrap;
}
Why are you doing clear:both if you want to display them inline-block? Just remove that style rule and it should work as you expect.
When you set display:inline-block, the element effectively behaves like a single character of text, that you can otherwise treat as a block.
Among other things, this means that it will wrap onto a new line if there isn't enough room.
To get around this, add white-space:nowrap to the container element. Optionally, add white-space:normal to the inline-block divs.
I would also suggest defining CSS rules as:
.tdDay {white-space:nowrap}
.tbDay>div {
display:inline-block;
white-space:normal;
}
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
I am designing a very simple table that contains a data element's properties. This element will be used to represent each element of a AJAX response in a kind of list.
The table is using "rowspan" and "colspan" to enlarge some cells. The problem, is that when I add an element below, this element overlaps the table, I don't know why. The HTML is valid, and the rowspan attributes indicate the exact amount of rows to merge.
I have deployed an example here: http://jsfiddle.net/vtortola/KzjKg/9/
As you can see, the green block overlaps the table, and that is the thing I want to avoid.
Any idea why is this happening?
Cheers.
You've attributed max-height:50px; to the div which contains the table. Remove this CSS declaration, and the table won't be overlapped any more.
I think the problem:
1) You maybe remove the max-height where your table is more than 50px.
div.mobileRow{
width:100%;
font-family:Arial;
margin:5px;}
in HTML if I write <td></td> it is an empty column. how can I specify how much space it will take? I want an empty column like that to take more space than its default..the goal is I want to have two text boxes in the same row of my page like this:
TextBox1 somespace TextBox2 and for "somespace" I thought maybe I can use that <td></td> but it does not have enough spacing...so if you also have a better idea for how I can reach my main goal that would be cool.
thanks.
Use a CSS style:
td { width:42px; height:42px; }
Though, on reading your question it seems I would have to encourage you not to implement this to achieve what you desire. Instead, style the textbox controls to use a margin:
input[type="text"] { margin:12px; }
There is the possibility of separating space-wise using non-breaking white-space ( ), but I would discourage this, too, as it would be being used in the mark-up structure as a means of layout and design, when this should be dictated by abstracted styling.
put a margin on your textboxes that is the space you want to be between them
have a look here, you can play with the margin to decide how much space you need
http://jsfiddle.net/tzUph/
You can use CSS to target the <td> and specify a width parameter.
td {
width:20px;
}
Place a div inside the td and set the width on the div style. I found that simply setting width on td doesnt work
So I have a table.
First thing I want to do is put some space between two rows of the table. I tried inserting a <br /> in between the two <tr> elements, but that only put space above the ENTIRE table (don't know why).
Second thing I want to do is center a picture in a column so it lines up in the middle of the text in the column below it. I tried placing an align=center on the <td> element to no avail.
Have you tried changing the CSS for the table rows and possibly adding a : padding-bottom: x px; or margin-bottom: x px; to gain the space that you would like in the table.
Also - I believe that you would need your "align=center" property to be a "text-align: center".
Putting spaces between the table rows won't work. All that content will be placed above or below the table. Styling the table must be done using CSS. Try something like:
td{
padding: 5px 0;
}
Use CSS, as HTML is for structure. Here is a link to W3C tutorial on styling tables with css In fact, if you are using tables for positioning, that is bad practice too - again use CSS.