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>
Related
I am using Angular CLI: 8.3.14 and Node: 12.18.0.
I have components A, B, and C, and I tried to put them into individual cells in a traditional HTML table, but they come out overlap, I've tried many CSS formatting tricks, below are a few of them that I tried, but none worked.
.gfg {
border-collapse:separate;
border-spacing:0 15px;
}
table td.expand {
width: 99%;
height: 99%;
}
<table class="gfg" width="100%">
<tr> <td class="expand"> <componentA></componentA> </td> </tr>
<tr> <td class="expand"> <componentB></componentB> </td> </tr>
<tr> <td class="expand"> <componentC></componentC> </td> </tr>
</table>
One more piece of information: this whole thing is also inside another <div> that I have made its height:100vh, so I don't think it is a space issue, what I want is to have the components stack up on top of one another.
http://www.surefiretaxes.com/Business/Crosslink-Tax-Software
Under the video and 2 images where it says "Features" this shows up correctly in Chrome/FireFox, but doesn't show up in IE9. What is really confusing me is when i take the same information out and throw it into DreamWeaver it works perfectly fine.
<style>
.Comparisonlbl {font-size: 13pt; color: #0061A0; line- height:1.2em}
.Comparison {border-collapse: collapse; border-spacing: 0;}
.Comparison tr {border-bottom: 1px solid #4D4D4D; line-height:1.3em}
.Comparison th {font-size: 11pt; color: #595959; padding: 15px 0 3px; text-align:center; vertical-align:top}
.Comparison td {text-align:left; color:#4D4D4D; font-size: small;}
</style>
</head>
<body>
<table class="Comparison" width="700px;">
<tbody>
<tr>
<th style="padding: 15px 0px 3px; text-align: center; color: maroon; font-size: 11pt; vertical-align: top;" width="324">Features Not Mentioned in the Video Above</th>
<th style="padding: 15px 0px 3px; text-align: center; color: maroon; font-size: 11pt; vertical-align: top;" width="364">Feature Description</th>
</tr>
<tr>
<th>Free Included Features:<br></th>
<th><div align="center"></div></th>
</tr>
<tr>
<td><strong>Free Unlimited E-Filing</strong><br>
<span style="font-size: x-small;">1040s, 1041, 1120s/c, 1065, 706, 709, 990, 5500 and more</span></td>
<td>You can E-File any Individual or Business form for any of the 50 U.S. states free of charge. To see a complete list of all the forms that you can e-file for free see our [Included Tax Forms] page.</td>
</tr>
<tr style="line-height: 1.3em; border-bottom-width: 0px;">
<td> </td>
<td> </td>
</tr>
<tr>
<th>Free Included Features:<br>
<div style="font-size: 9pt;">Crosslink doesn't offer these options</div></th>
<th><div align="center"></div></th>
</tr>
<tr>
<td><strong>Automatic Backup Software</strong></td>
<td>Backup your Tax Data from any year using our backup software. You can also retrieve these returns anywhere anytime. - [read more]</td>
</tr>
<tr>
<td><strong>E-File 2010, 2011, and 2012 returns</strong></td>
<td>With Sure-Fire you will be able to E-File 2010, 2011, and 2012 tax returns. This feature isn't available with many software vendors. - [read more]</td>
</tr>
<tr>
<td><strong>Interview Form Sheet</strong></td>
<td>Our software has a built in Interview Form Sheet that asks you questions to help determine what forms are needed for the return. - [read more]</td>
</tr>
<tr>
<td>
<table border="0">
<tbody>
<tr>
<td vAlign="center;"><strong>Refund by Pre-Paid Mastercard</strong>
</td>
<td vAlign="center;" width="85"><img border="0" src="/SureFire/v2/moneywise_card.png" width="60"></td>
</tr>
</tbody>
</table>
</td>
<td>Give your customers a Pre-Paid Mastercard their refund will be deposited onto before they leave your store. - [read more]</td>
</tr>
<tr>
<td><strong>Sure-Fire Assistant</strong></td>
<td>This software shows videos on how to do everything from a 1040 return to an amended return. Also, this software can automatically fix any software issues you might run into 9 times out of 10 without contacting support. - [read more]</td>
</tr>
</tbody>
</table>
I don't think border bottom works on a tr. Try putting it on a td tag.
Have you attempted to declare a doctype such as:
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
FYI you will need the proper markers around that, however I can't place them.
IE gets picky about table styling without them. Hope it works, sorry I would normally test it first for you but I'm on mobile.
This is my table:
<table width="100%">
<tr ><td width="35%" height="30" class="left-info" >Criminal Id :</td>
<td width="65%" class="right-info" >CR7887898652</td></tr>
<tr><td height="30" class="right-info" >Full Name :</td><td class="left-info" ></td></tr>
<tr><td height="30" class="right-info" >Date of Birth :</td><td class="left-info" ></td></tr>
</table>
How can I remove these repeating use of class for each table data. As, I've used class="left-info" for left side table data and class="right-info" for right side table data. But, this make the mesh of coding, can anyone suggest me how can I do the same style with minimal code?
You can either switch to a non-table layout (perhaps a DL may suit your needs better), or if you must use a table, consider using the col element, which you can apply a class attribute to.
Example
Using your example above, this is how I would suggest using the col element.
<table id="example">
<col class="label" />
<col class="value" />
<tr>
<td>Criminal Id :</td>
<td>CR7887898652</td>
</tr>
<tr>
<td>Full Name:</td>
<td>Foo Bar</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>01/14/1983</td>
</tr>
</table>
But, taking into account your example, I think you could accomplish your goal with better semantics and less code if you make use of TH elements and pure CSS:
#example th {
text-align: right;
font-weight: normal;
}
#example td {
text-align: left;
}
...
<table id="example">
<tr>
<th>Criminal Id :</th>
<td>CR7887898652</td>
</tr>
<tr>
<th>Full Name:</th>
<td>Foo Bar</td>
</tr>
<tr>
<th>Date of Birth:</th>
<td>01/14/1983</td>
</tr>
</table>
At this level, it shouldn't really matter if you use a DL or a TABLE as they both are semantically rich elements when used like this. IMHO, I still prefer a DL, but truthfully they can be more difficult to style.
I have a ASP.net web page I'm working with, I didn't create it myself, with the following HTML code:
<DIV style="POSITION: absolute; TEXT-ALIGN: center; WIDTH: 1400px; TOP: 60px; LEFT: 125px">
<SPAN style="TEXT-ALIGN: center; FONT-SIZE: xx-large" id=labelInstructions>Some Text: <BR><BR></SPAN>
<TABLE style="WIDTH: 1200px" border=1 align=center>
<TBODY>
<TR>
<TD><LABEL style="FONT-SIZE: x-large" for=FileUpload1>ENTER Path: </LABEL><INPUT id=FileUpload1 size=70 type=file name=FileUpload1></TD>
</TR>
<TR>
<TD><SPAN style="COLOR: red; FONT-SIZE: medium" id=fileUploadError><BR><BR></SPAN></TD>
</TR>
<TR>
<TD>
<TABLE style="WIDTH: 1200px" border=1>
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
When this html is displayed in IE, I notice that the alignment of the text in the cells in the inner table, i.e. the table that is in the third cell of the outer table, is distorted when zooming in and out on it. I have a fixed table setting in pixels instead of percentages, so I don't understand why this is an issue. I want the text in the cells to stay in the same
position when zooming. The code must be manipulated from the code behind, so I cannot create a separate CSS file. Any help is appreciated.
Here are two examples to illustrate what I'm talking about:
Normal zoom at 100%:
Zoom at 75%:
Notice in the second image the two table cells at the bottom are slightly offset to the left.
UPDATE:
Yes, I understand, we will be implementing a new system in the near future. Obviously this is old and very non-standard, this was dropped in my lap when I started working with it. And we're coming up with plans for a new system to replace it, in the meantime, this is what I have to deal with.
(1) There's a problem with your nested table...
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
The format of this inner table is:
Row 1: Two cells.
Row 2: One cell.
Row 3: Two cells.
You need to have an extra td in row #2. (I'd say use colspan, but I'm not sure if IE does that correctly either.)
(2) I don't know how to fix that, but my guess would be that it will require javascript or disabling of the zoom feature (last I heard, the latter is not possible, though. I could be wrong there.) I haven't read the entire thing, but this MSDN article seems like a great place to start. It looks like you can detect the browser's zoom factor. If it's not equal to 1.0, you could try to get javascript to resize things in order to get the td's to their intended location.
(3) It isn't recommended that you use tables for content alignment. (I suppose this would be a good reason why.)
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