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
Related
I have a simple primefaces filter datatable with some columns hidden (using diplay none). All works great. When I apply a filter that selects no rows (i filter some ID that doesnt exist) the columns start to look really weird. The hidden columns start taking space. I recently updated to primefaces 5.0
Here are some screenshots:
EDIT
I think I am getting close. The problem it is that when the emptyMessage it is generated, it has a colspan of 65 the total columns (including the hidden ones). Thats the problem. If I modify with firefox the colspan to 5 it works great. Anyone knows where primefaces generates that colspan?
<tr class="ui-widget-content ui-datatable-empty-message">
<td colspan="65"></td>
</tr>
That colspan it is the one I need to edit. I am studying the primefaces source code to try to fix it.
Hiding the columns does not work. Instead try a 0px width. I created a class I use specifically on 'hidden' columns. exportOnly
I also had to apply other style for other browser quirks. Not an ideal solution but does the trick.
.ui-datatable thead th.exportOnly,
.ui-datatable tbody td.exportOnly,
.ui-datatable tfoot td.exportOnly {
width: 0px !important;
visibility: collapse !important;
padding: 0px;
}
Overwrite the CSS class like this:
.ui-helper-hidden {
width: 0px !important;
display: table-cell !important;
}
It's a workaround, but it works for me.
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 the below page where the column header is fixed and the table body is scrollable. But when i scroll the data, i have the result like the image 2. Please suggest as to what to do to get rid of this. This is the code for my div. The table is sitting inside the below div.
<div style="overflow:auto; height:400px; position: absolute;">
Before scroll
After scroll
You have to declare a background color, like this:
#element {
background: white;
}
Please post a JsFiddle or Codepen of your markup.
The bgcolor attribute is deprecated. Use background-color: #FFF or background: #FFF instead. Also, please terminate your style declarations with a ; you are going to experience strange issues otherwise. It also may be that you are not applying the style to that header row correctly, but it is difficult to say without some example markup.
There's two odd things I'm noticing:
1) You are using a div tag as a table header, which I haven't seen anyone do nor do I see any obvious reason for it.
2) I heard position: absolute can cause some weird issues in IE. http://www.impressivewebs.com/absolute-position-css/ I'm not sure if that's the main issue though.
I designed a contentbox for a website and on the desktop it looked good. But now I want to put it on the mobile.
You can see a example with only relevant html+css here http://pastehtml.com/view/bze2phhwn.html
On my smartphone, ive seen that the border-radius breaks(it displays the background color instead of the border color) in the rounded corners for 1-3px and you can see this effect also on the browser if you zoom in a little bit. Its weird, because if you zoom a little bit out and in, you`ll see that this effect isnt always there. So I tought that it isnt my bad html+css.
What might be the problem?
This seems to be a bug. Submitted to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=758958
Also: https://stackoverflow.com/questions/10774506/border-radius-causes-white-lines-when-applied-to-individual-corners/10774635#10774635
I think this is a bug as well, but I found a fix... err maybe it would be considered a hack. Here is an image of my issue:
http://i909.photobucket.com/albums/ac298/roboyak/missingBorder_zpsbhftdfmd.png
So my story is that I was getting a reset.css style sheet imposed on me from the parent web page. The td element was getting the following style from that css sheet:
table tbody tr td {
border-bottom: 1px solid #ccc;
}
Long ago when I started the project I overrode this style by stating the following rule in my sheet:
table tbody tr td {
border-bottom: none;
}
In trying to solve my problem I noticed that the border-bottom rule was showing up as "medium none" instead of none. I added the following code, and the border was no longer broken.
table tbody tr td {
border-bottom: none none;
}
Essentially this breaks the rule so the border comes back again on all td's which is not what I want, but I think that this may give some insight into what is happening.
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%;
}