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.
Related
How can I change the thickness of a line between the two table rows
eg:
(the one highlighted).
This is how my code looks like at the moment:
i {
cursor: pointer;
}
a {
color: inherit;
}
th {
white-space: pre-wrap;
font-size: 25px;
color: goldenrod;
}
p {
font-family: 'BioRhyme', serif;
font-size: 35px;
}
<table class="table table-hover table-borderless">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>IP</th>
<th>Port</th>
<th>Ping</th>
<th>Players</th>
</tr>
</thead>
<tbody id="table">
<tr>
<th>Hexah's Test</th>
<th>0.0.0.0</th>
<th>27015</th>
<th>koala</th>
</tr>
<tr>
<th>Hexah's Test</th>
<th>0.0.0.0</th>
<th>27015</th>
<th>koala</th>
</tr>
</tbody>
</table>
I'm using Bootstrap Material Design v4
Thanks!
You can increase the border width between items in a table by using this in your CSS file:
td {
border-bottom: 5px solid black;
border-top: 5px solid black;
}
You can change the color, thickness, and the style of the border using those 3 values. You can, of course, add these properties to the th and table as well, changing the border style to other sides:
border
border-right
border-left
Learn more about CSS tables here.
I am printing a large report in pdf format including many tables but it does not contains horizontal cell borders in general.
For doing this, I have generated the report in cshtml, then passed it to pdf using NRECO
Now what happens is when my tables size is larger and when the page breaks in to another page then i am not getting horizontal line in my table.
But i want that Horizontal border in my table when my page break in Pdf.Currently i have 1 long table on Page1 at the end and i am not getting horizontal border.
See below image:Horizontal border problem in table
<table border="0" cellpadding="0" cellspacing="0" class="width100percent">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
...
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
...
...
</tr>
</tbody>
</table
I've been looking at your code and trying to reproduce your issue. From your CSS, you have the borders for the cell elements only on the left side so it seems incomplete to generate the sample image you included.
Here's an example of a built out HTML page based on your content:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Horizontal border problem in table</title>
<style>
table.width100percent {
width: 100%;
border-width: 0;
border-spacing: 0;
}
.border-table tr td {
padding: 0 3px;
font-size: 11px;
text-transform: uppercase;
height: 18px;
font-weight: 500;
font-family: Calibri;
border-left: 1px solid #000000;
page-break-inside: avoid;
page-break-after: auto;
}
</style>
</head>
<body>
<div class="border-table">
<table class="width100percent">
...full document here: https://pastebin.com/MNuwWNYG
I also tried converting it at NReco but as indicated above there are no horizontal borders to work with. The generated PDF looks like this: https://imgur.com/a/HNlpkSX
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?
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
I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.
I'm open to using divs as well.
<html>
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:
<style type="text/css">
.ItemTable
{
width: 100%;
border: solid 1px #dbdce3;
}
.ItemTable td
{
width: auto;
padding-left: 20px;
border: solid 1px #dbdce3;
}
</style>
<table class="ItemTable">
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
Item 1A
</td>
</tr>
</table>
</td>
</tr>
</table>
Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.
Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below
<style>
#container {border:1px solid #999}
.indent {margin-left:50px; border:1px solid #999;}
.item {background:#99cc00;}
</style>
<div id="container">
<span class="item">This is item 1</span>
<div class="indent">
<span class="item">This is item 2</span>
<div class="indent">
<span class="item">This is item 3</span>
</div>
</div>
</div>
Of course it really depends on what you are trying to display.
changing
margin-left: 20px;
to
padding-left: 20px;
works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)