I have a year calendar that shows just the way I want on normal browsers, but in responsive browser I want it to show all the months below each other, due to layout problems.
I know how to apply code to responsive browser - this is not what I am asking about.
I tried giving the td's the value of display:table-row, and its giving me almost the desired result .. it keeps pushing the rows to left and wont accept width:100% value, that's the problem.
Here is a link to the website I am working with www.5eren.dk
you need to set display:table on <tr> and set display:table-row on <td>. use this CSS:
.year-view>table>tbody>tr {
display: table;
width: 100%;
}
.year-view>table>tbody>tr>td {
display: table-row;
}
Related
can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):
I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?
More about this script can be fuonde here http://elvery.net/demo/responsive-tables/
That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.
Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.
In the code from here change these two rules as follows:
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td:before {
display:inline-block;
vertical-align:top;
width: 45%;
padding:0 3% 0 1%;
}
Rough example here:
Updated code as per comments below:
td:before {
float:left;
width: 95%;
padding:0 0 0 1%;
margin-left:-100%;
}
td {
padding-left:50%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
You need to break the words if they are too long. You can make this in css as:
word-wrap:break-word;
Try it.
The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of TD elements across the entire table to a uniform size dynamically based on content.
By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:
There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.
If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.
I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.
One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers
I have an HTML table with two rows and two cells in each row.
Cell 1 in each row has an image placeholder.
Cell 2 in each row has some text (different in every cell).
When I load it to the server it shows up like the image (cell 1) is aligned to the top and the text (cell2) is lower than the lower edge of an image.
I've tried v-align property for the table, vertical-align CSS property, cell padding, smaller font, smaller image etc.
Always get the same result.
vertical-align:middle; in CSS
You should make that thing into li's.
HTML:
<ul class="usps">
<li>Denver’s Only LOCAL Ad Posting Service.</li>
<li>Your first week of ad posting is FREE!!! We are that confident of our ability to post LIVE Ads for your firm!!!</li>
<li>etc</li>
</ul>
CSS:
ul.usps { list-style-image: url('checkbox.png'); }
For you question:
That's because you have set the vertical-align wrong (baseline). This alignes the stuff to the baseline of the parent element.
Are you sure you typed the properties in correctly? Using Chrome's Dev Tools and editing the CSS, this worked for me:
.content td { vertical-align: middle; }
#PeeHaa is right that you should not be using <table> for this since it's not tabular data. The most semantically correct choice here would be <ul> with:
ul li {
display: block;
list-style-type: none;
}
Remove the vertical-align:baseline from your tr definition. Then, to keep your spacing, add height: 65px;
You have:
vertical-align: baseline;
in your style.css, line 15. This is preventing it from looking how you want it to.
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}
Here's an odd rendering difference between IE and other browsers.
Internet Explorer 8
Firefox 3.5
Chrome 5
See the difference? That vertical line suddenly stops in IE8. That's because IE8 refuses to display a certain background image. Here's a relevant snippet of CSS code:
td#leftbar {
background: url(img/leftbar.gif) repeat-y right top;
width: 100px;
}
You can get additional information by viewing the website on your own computer here: http://labs.pieterdedecker.be/vspwpg/
The problem is not leftbar: It is the leftbartop table cell stretching all the way down to the bottom. That is because leftbartop is in the same table row as the content.
In fact, I think IE is the only browser doing this correctly: All elements in the tr get forced to the same height. IE is ignoring the columns' rowspan properties for some reason. Why, I do not know.
The first thing that comes to mind in terms of a solution - unless somebody comes up with an explanation for this behviour - is having a separate table on the left-hand side with the first (leftbartop) and third rows (leftbarbottom) having a fixed height.
Oh, and using tables for layout is no longer socially acceptable. Just as a side note :)
I'll second Pekka's comment about avoiding tables for layouts, but since proposing serious structural changes would be a bit extreme, the following CSS seem to work well enough to fix the problem:
TABLE#body {
background:url(img/leftbar.gif) repeat-y 94px top;
border-collapse:collapse;
width:100%;
}
TD#leftbar {
width:100px;
}
TD#leftbarbottom {
background:#FFFFFF url(img/leftbarbottom.gif) no-repeat right top;
height:100px;
}
As far as why there is a difference between IE and Firefox/Chrome, the only potentially relevant piece of information that I could find right now was the CSS 2.1 section on table height, which states:
CSS 2.1 does not specify how cells
that span more than one row affect row
height calculations except that the
sum of the row heights involved must
be great enough to encompass the cell
spanning the rows.
So, not only is IE's behaviour bizarre, there's doesn't seem to be a clear cut explanation of what should happen. In IE's case, space required by the multi-row cells appears to be divided up using some sort of relative percentages related to the minimum height of each included row.
To illustrate this, you can cause #leftbar to take up all the space it's leaving empty now by using the following rules:
TD#leftbartop {
height:1px;
}
TD#leftbar {
height:150px;
}
Another interesting example is a 1/3, 2/3 split:
TD#leftbartop {
height:33px;
}
TD#leftbar {
height:66px;
}
Note that if you set the height to something unreasonably small (like 1px in the earlier example), it calculates a height for that cell that is not based on the relative percentage, but something else. I'm not sure where that comes from right now, but I'll play around with the numbers and see if I can take a guess at it later on.
I am working on taking an IE only site and making it cross browser. Everything is looking good in IE, Chrome, and Safari. However Firefox isn't happy.
I have a table class called "datatable" it is as the name suggests a datatable. I am trying to get it to stretch to 100% of width of the div it's contained in. The div above is 100%. When I use firebug to check it, the table is stretching to 100%. However, the tbody that Firefox generated is not stretching to 100%. So because of that the rows in the table are as small as the tbody. So I have no idea how to fix this. I tried
tbody{width:100%;} and it did nothing.
Any ideas I would greatly appreciate it.
Okay I just answered my question... inside the css there was a generic css like this...
table
{
border:0px solid #000000;
padding:0 0 0 0;
border-collapse:collapse;
border-spacing:0;
display:block;
}
I removed the display:block and everything works great now... I had looked for that on the table.datatable definition, but did think to look for a generic one in the file...
This might be silly, but make sure you're selecting the tbody correctly
#datatable tbody{width:100%}
I had the same issue,
solved it eventually by setting the width property of the header cells (i figured that's what firefox looks at to decide the tbody width).
table.table_class th { width: 115px; }
it's an option if, like me, you don't want to mess with generic css.
Check to see if you have font-size set to something lesser than 100%.
If some browsers need display:block in <table> so ...
table {
// Something..
display: block;
}
body:not(:-moz-handler-blocked) table {
display: table;
}
Example case : HTML in e-mails
Just a bit hack if you still need to preview on Firefox