Solved

My 1st column in my HTML table is too wide

Posted on 2016-09-20

CSS
HTML

3 solutions

141 Views

Last Modified: 2016-09-22

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

Comment

Question by:rkckjk

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

5 Comments

LVL 30

Assisted Solution

by:Randy Downs

Randy Downs earned 125 total points

ID: 418065202016-09-20

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

TABLE width="60%"

Open in new window

LVL 36

Accepted Solution

by:Kimputer

Kimputer earned 250 total points

ID: 418065292016-09-20

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

LVL 34

Assisted Solution

by:ste5an

ste5an earned 125 total points

ID: 418065552016-09-20

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

LVL 2

Author Closing Comment

by:rkckjk

ID: 418070902016-09-20

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

LVL 34

Expert Comment

by:ste5an

ID: 418102712016-09-22

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.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create N column layout for Bootstrap

Article by: Julian

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.

How a “Why Us” Page Makes Your Business Stand Out

Article by: Lexie

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.

Box Shadow Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

HTML
CSS

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…