In my project, I am trying to make the tbody scroll in IE8. I know it can be scrolled by just giving overflow: auto to tbody. But this doesn't work in IE8. To make it work in IE8, the tbody must be given position: absolute (or float: left to both thead and tbody). If I make the overflow: auto work then the widths which I assigned to the th and td in percentages is being ignored. which in turn not letting the tr to occupy the full width in thead and tbody. Hence, there is a irritating space between tr and tbody/thead.
Please test this demo in IE8. (works fine in firefox and chrome)
and here is the code in fiddle.
Here are the strict points which I can't change
Width to td and th must be in percentages.
I can't change HTML markup
It must be solved using just CSS.
Actually, I did solve it with a dirty fix which is as follows
th:after,td:after{ /* only to the last column, first occurence */
content: "...................................................";
visibility: hidden;
}
The above code can also be checked by giving many dots to a specific td/th in developer tools
The above code looks ok but I need to give the :after pseudo selector only to the first row last column th and tr. If I give to every th and tr then the layout is messing up. and also the dots must be increased if the empty space between the tr and tbody is more. Then ofcourse this could be achieved only dynamically which I can't do in my current project.
PS: I maybe doing it completely wrong. I am just sharing my efforts where I reached very close to the result.
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
Related
For some reasons, I have to apply inline td width in a table, see lower part of table at this page using Chrome at this page
Firefox and IE seem to render this well, however, Chrome is rendering the width differently. Applying left and right paddings on tds, seem to have the same issues with Chrome.
Any ideas? Again, I need to do this inline. Global CSS seems to do render more issues with the site globally.
Try this
Remove width="" for all td's
and apply below css
CSS
.dataTables_wrapper table td {
padding: 0.5em 0 0em 0;
}
.view-footer td:first-child,
.dataTables_wrapper table td:first-child {
width: 120px;
}
The problem is allocating space for table column varying each browsers when you have not assign any width. so assign some width to your td will resolve the problem. Just add the following class in CSS to fix this problem.
#datatable-1 tr td:first-child
{
width:1%;
}
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
This is my following table which is not working in IE 8.
The problem is when I am scrolling the table, the first column is getting fixed and remaining rows are scrolling above the first column. This is probably only in IE 8; it is working fine in Chrome and Firefox.
<table border=0 id="dataTable0" class='table_data' style="position:absolute; margin:0;table-layout:auto" width=100%>
<syn:outputData outputdata="#{DocDetailsBean.paraList}" ></syn:outputData>
</table>
This is my CSS file:
.table_data {
background-color:#F3F3F3;
color:#666666;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
Add table-layout: fixed to the 's style. Without it, applying width to a table cell is interpreted as min-width (a carryover from when min-width didn't exist)
I found two ways to solve this problem in IE8.
1) Adding extra td element of width: 0px to tr's of thead and tbody.
IE8 demo
2) Adding a hidden letter to content of after pseudo selector.
tr:after{
content: ".";
visibility: hidden;
}
I added the above in conditional css. because the problem was only in IE8. (I haven't tested in IE9+)
<!--[if IE 8]>
<style>
/* the above css code here */
</style>
<![endif]-->
IE8 demo
I used the latter one because it is simple.
Here is a screenshot showing the problem:
Here is the CSS I am using:
#board table {
background: #eef0ff;
border-spacing: 0px;
border: 1px solid #475476;
}
#board td {
height: 20px;
width: 20px;
border: 1px solid #cfd7ee;
}
How can I makes the cells the same size in diferent browsers? Does anyone know why Opera and Firefox tighten the cells?
You will need to use a CSS reset, or set some of your own defaults for table margins, padding and other elements in your design.
A CSS reset (either yours or a third party one) will ensure all browsers have a similar starting point, regarding styles, as the different browsers do not have the same style defaults on different elements.
Additionally, as #thirtydot says in his answer, some browsers will ignore the height of a completely empty table cell, such as <td></td>. To ensure it is not ignored, you should add some content to these cells, a good choice being the non break space - , in this manner: <td> </td>.
Your cells are all empty, right? <td></td>?
One fix that will definitely work is to stick an in each cell: <td> </td>.
For some other ideas, see: CSS table, table-cell height issue in Firefox
First reset your HTML code default properties like padding, margin, height, width.etc.., then you apply your style to work
Better reset css is Eric Mayer's
How to make foo invisible using CSS (CSS3 if needed) while keeping bar and fizz visible?
<table>
<tr>
<td>
<textarea>bar</textarea>
<input type='button' title='fizz' />
foo
</td>
</tr>
</tbody>
Making foo in the same color as background is acceptable, but the trick is - background is an image, hence - foo must be transparent instead of solid color.
JavaScript isn't an option either.
Changing HTML is not an option either.
Any ideas?
This worked fine in IE8 and Firefox (IE7 left little dots for words, which I guess if you set the font-color to something that blends with the background image, it might do fine. Note that this does not affect either the text-area or the input for any text in them.
td {font-size: 0;}
ADDED ON EDIT
WOW I mean, really! This worked on IE7-8, Firefox, and Safari
td {visibility: hidden}
td textarea,
td input {visibility: visible;}
As a side note, I tested this with elements wrapped in div rather than a table, I even did a div in a div and the inner div shows while other content is hidden.
Apparently, the visibility property acts on the element, and (unlike opacity) propagates to the child elements by inheritance, so that if one explicitly sets a child element visibility it no longer inherits the hidden but uses its own setting of visible and the fact that the wrapper is hidden does not matter.
EDIT: Scott's is better. Use his.
I don't think a proper solution is going to be pretty.
td {
position: relative;
left: 9001px;
}
textarea {
position: relative;
right: 9001px;
}
If you don't have to support IE then setting the text to transparent is easy:
table {
background-color: cyan;
}
td {
color: rgba(255,255,255,0);
}
td textarea, td input {
color: #000;
}
You need to put it inside a container like a div then hide the container ..
Set the size of the td to be the same as the size of the textarea (via CSS width and height), then set overflow: hidden on the TD so that the text you want to hide is outside the bounding box?
whoops... should've read the OP a bit more closely. Guess the following won't work after all, since changing the html isn't an option.
Set a css class on the container you want to hide (the textarea?):
...
<textarea class="hideme">bar</textarea>
...
and the following css:
.hideme {
display: hidden;
}
'hidden' makes the element disappear (it's literally not displayed), but still is still accounted for in the document flow and takes up the space it normally would. If you want it to literally be gone and not have any effect on the document, then use display: none.
How about the reverse of Amber's suggestion -
Set overflow to overflow: hidden on the TD, fix the size where it is right now and add a huge padding-bottom on the textarea or button.