Standard fixed table width - asp.net

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

Related

Angular components in html table cells overlap

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.

nth-child td width stretching other elements?

I have a two column layout in sharepoint online and upon page inspection I can see that it has a table with two columns. I'm trying to hide one of the columns for printing, which is working just fine, but sharepoint has specified the width of the first column as 66%. It has no class or id. I cannot change this.
I am able to change the width of the column, but the problem I'm seeing is then that the % of the columns on the inside table is also changing, even when I use a specification of nth-child(1) on the id of the outer table.
I won't submit you to the mess of code that is sharepoint but the layout is like this:
<table>
<tbody>
<tr>
<td>
<table width="100%>
<tbody>
<tr>
<td style="width: 25%>></td> <-this is getting stretched.
<td style="width: 25%>></td>
<td style="width: 25%>></td>
<td style="width: 25%>></td>
</tr>
</tbody>
</table>
</td>
<td>
</td>
</tr>
</tbody>
</table>
#media print {
table#layoutsTable td:nth-child(1) {
width: 100% !important;
}
}

Different CSS styling for left and right side table data

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.

Text misaligns in IE

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.)

IE css - last table row to expand to fill remaining height

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

Resources