I have a <table> with <thead> and <th> tags.
Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.
In Firefox it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. If I remove the background image of <th> then the background image of <thead> appears.
Any suggestion?
EDIT:
Here is my simplified code:
<table>
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
<th>CCCC</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody>
</table>
<style>
thead {
background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
}
th {
background: url(PATH TO MY IMAGE) no-repeat left center
}
</style>
Starting from this question and modifying the answer:
<style>
table {
border-collapse: collapse;
background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
}
tbody {
background: #fff; /* This covers up most of the <table> background */
}
th {
background: url(PATH_TO_TH_IMAGE) no-repeat left center;
}
</style>
Gives a reasonable approximation of what you're probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn't check Opera/Chrome/Safari/IE8 though.
You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don't litter your CSS with IE7 kludges.
This is just one of IE's table-related bugs...
I suggest adding display:block; to thead, or styling "thead tr" instead.
This isn't a complete solution, but I can't post comments yet.
IE seems to apply the thead rules to the th elements. Change the 'repeat-x' to 'no-repeat' and set the width for th and td to something much wider than your background images and remove the th background image. You'll see the thead image repeated in each th ... So when you enable the background image for th, you're essentially overriding thead's background image. This is definitely not correct behavior, but there you go.
So, if you can, the best option might be to just back off and get that background image in there some other way. Maybe you can apply it to the table instead and use 'top' to position it?
Related
I have a table on my page that I am unable to apply rounded corners to for Firefox. I have tested on IE, Chrome, and Safari and it works fine on those browsers.
HTML
<table class="login-table">
<tr id="header">
<td id="logo">
</td>
</tr>
</table>
CSS
#logo {
height:85px;
width:170px;
border-top-right-radius:14px;
border-top-left-radius:14px;
}
I tried adding -moz-border-radius-topleft:14px and -moz-border-radius-topright:14px to #logo, but it did not change my output.
Here's an example which shows my issue.
It looks to me that the tr element is actually keeping it's square edges, causing the issue. If you make the tr itself transparent, and make sure the children don't inherit the transparent background-color, it seems to work:
// The first <tr>
#header {
background-color: transparent!important;
}
// The child of the first <tr>
#logo {
background-color:#1c918a;
}
Demo: http://jsfiddle.net/o9z695hf/
I managed to show the top rounderd by moving the CSS down to .container and adding a few changes (height: 100%, etc.)
Here is the result: http://jsfiddle.net/jzdy7yz4/16/
I still see what looks like a white 1px border outside. I suppose it is some kind of spacing.
I am building an HTML table and using Internet Explorer 11. In each TR are several TD with embedded elements of varying size. I inspected the page through IE DOM Explorer and think I know what is going on. Generally the textarea is the largest element (at 167px as per the CSS) but sometimes one of the other td elements will be bigger (say td1=300px). The problem I have is that I want the text area to fill out to 300px. I can see though that the height is inheriting from td id="td3" which is still 167px. Is there a way I can get td id="td3" to get the height from the largest sibling td in a tr.
The HTML looks something like this
<thead>
...
</thead>
<tbody>
<tr>
<td id="td1">[Dynamic Text1]</td>
<td id="td2">[Dynamic Text2]</td>
<td id="td3"><textarea class="ta"></textarea></td>
</tr>
<tr>
...
</tr>
<tr>
....
</tbody>
CSS
.ta{
height: 100%;
min-height: 167px
}
One thing is I notice Chrome does what I want but I would prefer a solution that conforms with the standards
Make sure you don't have HTML errors (try validating with w3.org validator). That is often the cause of display bugs that crop up between different rendering engines. Anyway, your example seems to work fine here:
td {
min-height: 200px;
background: lightblue;
vertical-align: top;
}
textarea {
display: block;
height: 100%;
min-height: 50px;
}
http://jsfiddle.net/Kg3P5/2/
I am trying to change the background color of my whole tbody using CSS and :hover. When a background is already set, I cannot make the hover background change. I simply cannot. I even tried with !impotant but without luck.
<table border="1">
<tbody>
<tr>
<th>Testing</th>
<td>Some stuff</td>
</tr>
<tr>
<th>Testing</th>
<td>Second more stuff</td>
</tr>
</tbody>
</table>
My CSS
th {
background: red;
}
tbody:hover {
background: blue !important;
}
http://jsfiddle.net/W4cJh/1/
As you can see, the hover works fine if the background has not been set. Remove the background: red from the th-tag, to see that it works without a preset color.
This will do the work for you, no need for !important:
th {
background: red;
}
tbody:hover,
tbody:hover th {
background: blue;
}
Demo: http://jsfiddle.net/W4cJh/4/
That's because the TH is a child of the table, and so is technically on top of it. By setting the TABLE background to blue, it does not override the TH background.
To fix this, add this:
tbody:hover th {
background: blue;
}
(and you can skip the !importants. Those are bad practice.)
Example fiddle is here.
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
I'm having problems trying to embed a table in an existing HTML page with some CSS.
This CSS is hiding the header of the table by default with a style definition like:
.tablestuff thead {
display: none;
}
But I want the table to show, so I tried setting the style on the thead element with "display:block" (with javascript). That makes the header display, but the columns of the header don't line up with the td columns.
I have reduced my HTML to the following (hopefully with minimal typos) and showing the style on the thead element as set by javascript.
<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>
How can I make both the header show and also align correctly with the td columns?
CSS includes more display modes than the commonly used none, inline, inline-block, and block. There are quite a few, in fact.
In this case, it appears what you want to use instead of display:block; is display:table-header-group;.
Here are some examples of the different styles, as applied to your table:
http://jsfiddle.net/CrYdz/1
The problem is caused by the display:block in the style attribute for the thead.
Change it to display:table-header-group
When you want to show the thead element use this value: display: table-header-group;
To set same width for table header and table body in table:
<table style="table-layout:fixed">
In case nothing fixes it. move your <tr> inside thead to tbody.
this was the only solution in my case since i had so many complications already.
Maybe the content of the THs is wider than the content of the TDs and in reality the width is not 20px as set.
So, because you first load the page without the thead, the table gets the width of the TDs. Then, when you display the THEAD by js, the table width continues being the same but probably the THs have different width.
By default, th and td should be aligned. If you want to leave it as default, just put display: unset:
.tablestuff thead {
display: unset;
}
Plain JavaScript:
document.querySelector("thead").style.display = "unset";
jQuery:
To make the jQuery's $(".tablestuff thead").show() method works, your css needs to be defined like this:
.tablestuff thead[style*='display: block'] {
display: unset !important;
}
This is because .show() will set the display to block by default. The above css will set it back to unset whenever it's set to block.
show and hide th instead of thead with the css
/* to hide */
.tablestuff thead th{
display: none;
}
/* to show */
.tablestuff thead th{
display: table-cell;
}