I use tables for generating simple horizontal graphs (for easy scaling).
I use colspanning to get exact overlapping (sometimes the cells overlap each other, but not in this example).
My issue is that IE(8) renders the relative cell widths wrong.
I know that a cell can not get smaller than it's content, but that is not the issue here.
For example the "X 65" cell in the example gets alot wider then 47% in IE.
Firefox is doing great however.
Here is the example:
<html>
<body>
<style>
table.CompAnalysisTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
font-size:8px;
}
table.CompAnalysisTable td {
border-width: 1px;
border-style: solid;
border-color: black;
}
table.CompAnalysisTable td table
{
border-style:none;
}
</style>
<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>
<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X 65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A 7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B 1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A 72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B 1</td>
</tr>
</table>
</body>
</html>
I have tried other techniques like divs and separate tables for each row, but colspanning has been the only technique for getting the overlapping exact.
Another solution is to render images on the server, but then i loose the scaling and it is pretty time consuming.
Any help is much appreciated.
A header like this will save you the trouble of fixing it for IE 8 by having it render it as IE 7:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Other than that you can try to see what it is that IE 8 is doing and fix that with a specific html condition:
<!--[if IE 8]><![endif]-->
I wish I could help more, but I do not have IE 8 so I cannot see the problem.
Maybe these links can help:
HTML conditions
Beyond Doctypes
I had the same problem than you ... My solution is to use some funky javascript (with Jquery of course ;-) ) code to fix the TD widths ...
Something useless as well, if you want a width to 100%, set its width to 10 000px !
Same problem on IE, Google Chrome & Safari
Related
How can I make the table cell border to be the same width even if I set that border twice? In the examples below you can zoom in and out from the code snippet and see that borders have different width because one was set twice and other just once. Is there a way to make the width to be the same?
table {
border-collapse: collapse;
}
td {
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
<table>
<thead>
<tr>
<th>
123
</th>
<th>
123
</th>
<th>
123
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
Answer
The code you wrote is correct, I'm afraid the problem is the zoom of the web page set differently from 100%. It happened to me couple times and I managed to fix that doing this:
From the browser, try to reset the zoom of the web page to 100%
Let me know how it goes :)
just follow this code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style = "width:50%">
<tr>
<td>66,120</td>
<td>36,600</td>
</tr>
<tr>
<td>26,179</td>
<td>91,641</td>
</tr>
</table>
</body>
</html>
I'm creating Splunk dashboards. For my tables I have a style sheet called application.css that alternates the color of the table rows, per requirements. Unfortunately when using charts the highcharts-tooltip is basically a table and it is rendered with alternating colors for the rows. As a result the value row is a very light green background with white text. The text cannot be read.
It looks like the highcharts-tooltip is generated by a java script.
This is how the tooltip is rendered in the page:
<table class="highcharts-tooltip">
<tbody>
<tr>
<td style="text-align: left; color: rgb(204, 204, 204); max-width: 120.34px;"> WebPage: </td>
<td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">\\x94/bla/bla/Browse.html\\x94</td>
</tr>
<tr>
<td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits: </td>
<td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">12</td>
</tr>
<tr>
<td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits%: </td>
<td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">24.49%</td>
</tr>
</tbody>
</table>
The second tr is the one that cannot be read. My question is, is there a way to override the alternating row colors in the tooltip using css in my application.css file so that the row is not rgb(255,255,255) but rgb(00,00,00)?
Using !important might be the only way of overriding the in-line style. Keep in mind this solution will change the color of td even in tooltips of other charts. Prepend the selector with the #[CHART CONTAINER ID] to avoid that.
Css:
table.highcharts-tooltip tbody tr td:nth-child(2){
color: #000000 !important;
}
nth-child browser compatibility
I have a DOM structure like the following:
<table class="playlist">
<thead>
<tr>
<th>TH1</th>
<th width="53">TH2</th>
<th width="53">TH3</th>
<th width="53">TH4</th>
<th width="53">TH5</th>
<th width="53">TH6</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
<td>TD6</td>
</tr>
<tr class="expansion">
<td class="expansion" colspan="6">
<div class="comment_wrapper">
<form>
<textarea style="width=482px" class="mini">x</textarea>
</form>
</div>
</td>
</tr>
</tbody>
</table>
Related style rules are like:
table {
width: 580px;
border-bottom: 1px solid #EEE;
}
.comment_wrapper {
height: 270px;
border: 1px red solid;
overflow-x: hidden;
overflow-y: auto;
}
.comment_wrapper form textarea {
height: 70px;
width: 482px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px red solid;
}
My problem is that whenever I added the second tr, width of table columns changed into a mess like the following in IE6/7.
When I comment out this tr, the column width restore.
Why does adding a tr affects column width? How can I avoid this effect?
PS
I've reproduced this problem on JSFiddle, and this is the link: http://jsfiddle.net/7mYY8/1/
Well, you have 6 columns 5 of which have a defined width.
The 1st column doesn't. This means it has to be computed. Sure you have the table width defined in CSS, but IE 6 isn't exactly the best thing.
Your best bet is going to be to explicitly define the width of all of your header columns. Then give the table the css attribute of "table-layout: fixed". This is going to enforce your widths for the entire rendering of the table.
I'm attempting to display a column separator for a table in IE8. I'm using CSS which works great in Chrome and Firefox but in IE8 the corner of the table cells with the black column separator appear differently. You can view the differences in the the below images. The first image is from IE8 which is showing the results that I do not want and the second image is from Chrome which shows how I want the table to appear.
The source is below, you can also edit it at http://jsbin.com/obava4/2/edit:
table.testresults
{
border-collapse:collapse;
}
table.testresults td {
padding: 3px;
border-style:solid;
border-width: 4px;
border-color:lightgray;
font-size: 8pt;
font-family: Arial;
font-weight:400;
}
table.testresults *.borderleft {
border-left-color: black;
border-left-style: solid;
border-left-width: 5px;
}
table.testresults th {
font-size: 0.7em;
font-family: Arial;
padding: 3px;
spacing:0px;
border-bottom-color: lightgray;
border-style:solid;
border-width: 4px;
border-color:lightgray;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</head>
<body>
<table class="testresults">
<col id="col1"><col id="col2"><col id="col3">
<tr class="currenv">
<th class="corrcorrenv borderleft" align="left" colspan="1">CORR of COR</th>
<th class="correnv borderleft" align="left" colspan="1">CORR</th>
</tr>
<tr class="currenv">
<th width="50px" class="resultheader borderleft" align="left">Result</th>
<th class="nowrap">Age </th>
</tr>
<tr>
<td class="borderleft" TestResultsID="">Pased</td>
<td>row.ARAge</td>
</tr>
</table>
</body>
</html>
</body>
</html>
I'm afraid it's just the way IE renders table cell borders. Alternatively, you could try wrapping the cell content in a div and giving the borders to the div, but it's quite a challenge to get divs to fill a table cell - reference this SO question.
This question has been asked (and answered) previously at: CSS: Make a block element fill the entire space of a parent element?
However, the accepted solution does not work in CHROME (as noted in the comments by mercator). The fix suggesting to add a height:100 to the <tr> element doesn't work either. Does anyone know how to achieve this effect with webkit-based browsers? The link http://dl.getdropbox.com/u/26620/stackoverflow1.html (provided by the original poster) shows this issue. It works in FF/IE but not chrome.
Thanks.
I tried this in Chrome and it seems to work great: http://apptools.com/examples/tdcolor.php
Here's the css (call it test.css):
table.navbar {
border-collapse: collapse;
}
table.navbar td {
border: 1px solid #ccc;
}
table.navbar td a{
display: block;
width: 9em;
padding: 3px;
text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
color: #000;
background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
color: #fff;
background-color: #666;
}
And a sample html file (remember to change the path to the test.css file):
<html>
<head>
<link rel='stylesheet' href='CHANGE PATH TO YOUR test.css' type='text/css' media='all' />
</head>
<body>
<p><strong>Example:</strong></p>
<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><table border=0 cellspacing=0 cellpadding=0 class=navbar>
<tr>
<td class=navbar><a href="javascript:void(0);">First that is very, very, long to make sure that everything is working correctly <b
style="color:black;background-color:#a0ffff">Link</b></a></td>
</tr>
<tr>
<td class=navbar>Another <b style="color:black;background-color:#a0ffff">Link</b> </td>
</tr>
<tr>
<td class=navbar>A Third <b style="color:black;background-color:#a0ffff">Link</b> </td>
</tr>
</table></td>
<td valign=top class=othercontent><p>Other content goes here.</p></td>
</tr>
</table>
</body>
</html>
Does that work for you?