We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
6 days, 21 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
My 1st column in my HTML table is too wide
Posted on 2016-09-20
Here's my code for the first six rows.
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
<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>
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
[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
2
- +1
5 Comments
The table is adjusting to the entire screen. Maybe try making it a smaller percentage like 60%.
TABLE width="60%"
Active 1 day ago
Experiment with this code:
It's the percentage that you want to adjust. If you want to fix it, can also be points, as in 200px
<TH width="20%">
<font color="black">
<u><DIV align="left">Overnight Batch Processing</DIV></u>
</font>
</TH>
It's the percentage that you want to adjust. If you want to fix it, can also be points, as in 200px
Active today
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>
Featured Post
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Suggested Solutions
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month6 days, 21 hours left to enroll
734 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.