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
LVL 2
Richard KreidlSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Randy DownsOWNERCommented:
The table is adjusting to the entire screen. Maybe try making it a smaller percentage like 60%.

TABLE width="60%"

Open in new window

0
KimputerCommented:
Experiment with this code:

<TH width="20%">
                         <font color="black">
                              <u><DIV align="left">Overnight Batch Processing</DIV></u>
                         </font>
                    </TH>

Open in new window


It's the percentage that you want to adjust. If you want to fix it, can also be points, as in 200px
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ste5anSenior DeveloperCommented:
First of all: Make yourself familiar with HTML, HTML5 and CSS. This will reduce your code drastically. E.g.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            table { width: 100%; }
            table, td { border: 1px solid black; text-align: center; }
            td:first-child { text-align: left; width: 320px; }
            thead { background-color: #cccccc; }
            thead td { text-decoration: underline; }
            tbody tr.crossheading td { background-color: #33e9ff; color: #3336ff; font-size: 20px; text-decoration: underline; }
            tbody td { font-weight: bold; }            
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>Overnight Batch Processing</td>
                    <td>SLA/OLA</td>
                    <td>END TIME</td>
                    <td>BUSINESS IMPACT</td>
                    <td>IM</td>
                    <td>REASON</td>
                </tr>
            </thead>
            <tbody>
                <tr class="crossheading">
                    <td colspan="6">Mutual Funds</td>
                </tr>
                <tr>
                    <td>Mutual Funds EOD Release</td>
                    <td>6:50pm</td>
                    <td><xsl:apply-templates select="MF38035A"/></td>
                    <td><xsl:apply-templates select="MF38035A_BI"/></td>
                    <td><xsl:apply-templates select="MF38035A_IM"/></td>
                    <td><xsl:apply-templates select="MF38035A_RS"/></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Open in new window

0
Richard KreidlSoftware DeveloperAuthor Commented:
I like all the solutions, but I picked the easiest one to use at this time.
0
ste5anSenior DeveloperCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.