asked on

My 1st column in my HTML table is too wide

Here's my code for the first six rows.

<style type="text/css">
table, th, td {
    border: 1px solid black;
	}
</style>
<TABLE width="100%" border="1" valign="TOP">
               <TR bgColor="#cccccc">
                    <TH>
                         <font color="black">
                              <u><DIV align="left">Overnight Batch Processing</DIV></u>
                         </font>
                    </TH>
                   <TH>
                         <font color="black">
                              <u>SLA/OLA</u>
                         </font>
                    </TH>
                    <TH>
                         <font color="black">
                              <u>END TIME</u>
                         </font>
                    </TH>
					<TH>
                         <font color="black">
                              <u>BUSINESS IMPACT</u>
                         </font>
                    </TH>
					<TH>
                         <font color="black">
                              <u>IM</u>
                         </font>
                    </TH>
					<TH>
                         <font color="black">
                              <u>REASON</u>
                         </font>
                    </TH>
					</TR>
					<TR bgColor="#33e9ff" border="0">
                        <td colspan="6">					    
						<font color="3336ff">
						      <u><DIV align="left"><p style="font-size:20px">Mutual Funds</p></DIV></u>
					     </font>
					    </td>
					</TR>
				    <TR border="1">
					   <TD>
					   <font color="black">
					           <DIV align="left">Mutual Funds EOD Release</DIV>
					    </font>
						</TD>
					   <TD>
					 <font color="black">
					      <DIV align="center"><b>6:50pm</b></DIV>
					 </font>
					</TD>
					 <TD>
					 <DIV align="center"><b><xsl:apply-templates select="MF38035A"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="MF38035A_BI"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="MF38035A_IM"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="MF38035A_RS"/></b></DIV>
					</TD>
					</TR>
					<TR bgColor="#33e9ff" border="0">
                        <td colspan="6">					    
						<font color="3336ff">
						      <u><DIV align="left"><p style="font-size:20px">Insurance/ISA</p></DIV></u>
					     </font>
					    </td>
					</TR>
					 <TR border="1">
					   <TD>
					   <font color="black">
					           <DIV align="left">Insurance Database</DIV>
					    </font>
						</TD>
					   <TD>
					 <font color="black">
					      <DIV align="center"><b>10:30pm</b></DIV>
					 </font>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="BT30004"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="Bt30004_BI"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="BT30004_IM"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="BT30004_RS"/></b></DIV>
					</TD>
					</TR>
					<TR border="1">
					   <TD>
					   <font color="black">
					           <DIV align="left">ISA Database</DIV>
					    </font>
						</TD>
					   <TD>
					 <font color="black">
					      <DIV align="center"><b>12:00am</b></DIV>
					 </font>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="LASTISA"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="LASTISA_BI"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="LASTISA_IM"/></b></DIV>
					</TD>
					<TD>
					 <DIV align="center"><b><xsl:apply-templates select="LASTISA_RS"/></b></DIV>
					</TD>
					</TR>
</TABLE>

Open in new window

I attached file screen print showing the 1st 6 rows of a long report.

As you can see the 1st column is too wide.
Screen-print-of-the-web-page.PNG

SOLUTION

Randy Downs

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

ASKER CERTIFIED SOLUTION

Kimputer

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SOLUTION

ste5an

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Richard Kreidl

ASKER

I like all the solutions, but I picked the easiest one to use at this time.

ste5an

btw:

- FONT is a deprecated element and should not be used.
- Your usage of DIV in TD is wrong, cause DIV is a block element, but you assign only text. The correct element in this case is SPAN.