The actual table is a lot larger than the mock-up one that I am going to show you but this mock-up one does explain the problem. Please go to http://www.monteandjanicechan.com/test_table.cfm
The thickness of the grid lines in the table are coming up the way I want in the HTML version. You can do a View Source to see the actual HTML stuff that gets generated. Now, I put these HTMl codes within the cfdocument tag with format="pdf"; please go to http://www.monteandjanicechan.com/test_table_pdf.cfm. You will see the inconsistent thickness of the grid line for sneezing and for flu. To further illustrate my point, I removed the background colors and generate a PDF; please go to http://www.monteandjanicechan.com/test_table_pdf_nocolor.cfm. The thickness of the grid lines is back to normal.
This leads me to believe that the background color of one cell somehow goes over to the cell right next to it and cover up the border. Here are the strange things:
1) This is ONLY happening in rowspan and ONLY happening from the second row on to the rest of the rowspan. For example, first Sneezing is okay but the border of the second sneezing is not correct; the first Flu is okay but the borders of the second and the third Flu are not correct.
2) The background color does NOT cover the border of its own cell at all; it only cover the border of the cell right next to it.
My question is, how can I fix this issue?
Any suggestions and pointers are greatly appreciated.
The thickness varies in the HTML version as well. I think the problem is with your CSS rules.
This works how I think you want, although it could probably be improved.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Table</title>
<style type="text/css">
td {
border-top: 1px solid black;
border-left: 1px solid black;
}
.right { border-right: 1px solid black; }
.bottom {border-bottom: 1px solid black; }
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="a_style">Name</td>
<td class="a_style">Problem</td>
<td class="right">Treatment</td>
</tr>
<tr>
<td class="b_first">Jane Doe</td>
<td class="c_first" style="background-color:#ffff99">Cough</td>
<td class="right" style="background-color:#ffff99">Vitamins</td>
</tr>
<tr>
<td class="b">John Doe</td>
<td class="c" style="background-color:#99FF99">Sneezing</td>
<td class="right" rowspan="2" style="background-color:#99FF99">Nose Spray</td>
</tr>
<tr>
<td class="b">Joe Schmo</td>
<td class="" style="background-color:#99FF99">Sneezing</td>
</tr>
<tr>
<td class="b">Joe Six Pack</td>
<td class="c" style="background-color:#cccccc">Flu</td>
<td class="right bottom" rowspan="3" style="background-color:#cccccc">Flu Shot</td>
</tr>
<tr>
<td class="b">Joe The Plumber</td>
<td class="" style="background-color:#cccccc">Flu</td>
</tr>
<tr>
<td class="bottom">Joe Doe</td>
<td class="bottom" style="background-color:#cccccc">Flu</td>
</tr>
</table>
</body>
</html>
Related
Select cells are not displaying borders in my table. There doesn't seem to be any rhyme or reason; there are just a few cells that don't display the borders properly, even though the surrounding cells render just fine. I've tried to isolate the problem, but without luck.
Please excuse the inline CSS - I don't have stylesheet access in the CMS, requiring everything to be inline. Not sure if it's relevant, but everything worked when I planned this out with a stylesheet before switching to inline CSS.
Any help is appreciated. Thank you!
<!---4/5:COMMUNITY ENGAGEMENT TABLE--->
<table style="width:90%;font-family:Tahoma;font-size: 11px;color:#253E6E;text-align:center;border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr class="dbblue" style="text-align:left; background-color:#253E6E; font-family: Tahoma;color: white; font-size:13px;">
<td colspan="5" style="padding-left:5px;">COMMUNITY ENGAGEMENT</td>
</tr>
<tr class="dbred" style="text-align:center; background-color:#A33D4A; font-family: Tahoma; color: white; font-size:11px;">
<td class="row1" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Initial Baseline</td>
<td class="row2" style="width:25%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Indicator / Metric</td>
<td class="row3" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">2016-17 Status</td>
<td class="row4" style="width:45%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">Rationale / Details</td>
<td class="row5" style="width:10%;border-width:1px; border-style:solid; border-color:#253E6E; padding:3px;">2018 Goal</td>
</tr>
<tr>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Began Formal Process in 2013-14</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Maintain Effective Community Engagement</td>
<td class="dbgreen">Process on Schedule -<br />Work Plan</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">During the Engage 200 process, our community requested the Board remain connected to the community to determine its priorities, foster partnerships and promote learning.</td>
<td style="border-width:1px;border-style:solid;border-color:#253E6E;padding:3px;">Plan Monitored Annually</td>
</tr>
</tbody>
</table>
I can't get the border width to be 3px solid green in firefox, even though it is working in Chrome. How can I fix this? My code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
td {border: 3px solid green; background:blue;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
To eliminate the spaces and avoid double borders between the cells you have to collapse them, like:
table {
border-collapse: collapse;
}
DEMO
Also it's a good idea to use some kind of CSS discrepancy eliminator, which can save you a lot of time and helps avoid situations like this - Normalize CSS or CSS Reset
here is the jsfiddle (http://jsfiddle.net/jw5Gg/1/) i added padding to give it some space. but really it had the border you just needed content. i hope this helped.
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example
Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?
This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.
I've tried stuff like putting exact heights on the rows, say "<tr style="height:20px;"> and I've tried 100% height on the last row, no luck so far!
Update:
This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content. Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.
If javascript is ok, you could use jQuery and find the top position of the last row and the position of the bottom of the window or element. The difference should be set as the height of the last row.
I didn't do any code yet, because I wasn't sure if you were looking for a table inside of an object or to have it fill to the bottom of the window. I can do that for you if you'd like with some more detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
<tr>
<td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td valign=top style="padding:0px;">
<table height=1>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td valign=top>full<br><br><br>more full</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Updatedx3, works in ie6/ff
I have been searching the net about border-collapse. And it seems it does not really collapse the border on nested table. I wrote a sample HTML and it seems to be ignoring border collapse.
I found a related question here but it seems it is not solved. link text
<html>
<head>
</head>
<body>
<p>dsafhidsljfalkdsjfklsdajfkjsdakl jdsfjasdklfasdkljfkl</p>
<table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
<table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
A
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
B
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Supplementary Info (based on somacore and moo's comment):
I already used the "border: none" in the internal table to solve this problem. But on some designs, it is not just one nested table. For complex web pages, it needs upto 3 to 4 nested table levels to design the GUI. And inside those nested tables, not all cells uses border. I had just used a simple example for the problem.
Is there any other solution that hand picking merging adjacent borders to one?
border-collapse works on the td and tr elements within a table.
And like somacore stated... why not turn off the border on the second table? (or why not use real markup?)