Solved

HTML Table with large text but cant get rid of padding

Posted on 2014-01-14
10
332 Views
Last Modified: 2014-01-17
I need to display very large text in a table (digital signage), but can not figure out how to get rid of the padding around the large text in the cell.

I have tried the code below, several css resets, but I don't wont any padding at.

I have got to be overlooking something, but cant figure it out.

<table width="600" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td style="font-size: 92px; max-height: 4px;">1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Open in new window

0
Comment
Question by:keith1001
[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
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39781197
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
 <style>
   .big{font-size:92px;line-height:70px;}
   
  </style>
</head>
<body>
  <table width="600" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td class="big">1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39781217
It took a little more css than that to eliminate all padding in my tests:

font-size: 92px;
line-height: 80px;
display: block;
height: 0;
border: none;
0
 

Author Comment

by:keith1001
ID: 39781218
The line-height did the trick!  

It appears 92px is the largest font size, any way to make bigger, like 4-6" tall Number?
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 38

Expert Comment

by:Tom Beck
ID: 39781228
I don't know what browsers you are looking at, but just adding line-height:70px does NOT eliminate all padding in Firefox or Chrome on a Mac.

Use ems for bigger fonts like font-size:20em.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39781238
That spacing is part of nearly every font for characters like q, else it would spill into the next line.  Your font size is just accentuating it.
Scott's solution is about the best you can get.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39781247
I disagree. Try this css:

    border: medium none;
    display: block;
    font-size: 80em;
    height: 0;
    line-height: 0.85em;

But it will only work for numbers and letters that do not drop below the line (caps?). Unless you are compensating some other way. Which begs the question, why tables?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39781257
Your solution still has a large top  'padding' and is in essence the same as Scott's
0
 

Author Comment

by:keith1001
ID: 39781266
I testing in IE11 and Chrome, what Scott showed me works, there is a little more at the bottom versus the top though.  I just now using mm for the size.

I am using tables, as it will be 30 columns across by 6 rows.  Also need to style each cell sometimes differently.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39781267
I guess I've taken the question too literally but I prefer not to make assumptions. If you want to fill a box with a border from top to bottom with characters then Scott's solution does not work because the font will allow space at the bottom for lower case letters that drop below the line. The OP used the number "1" as an example. If only numbers or capital letters are being used then my solution is better because it eliminates the bottom space. Top padding does not exist with numbers or upper case letters.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39781286
Part of the issue too may be using tables and not div's.   This stuff is all smoke and mirrors anyway and you have more room to play around outside of tables.   Do you have an image of what you want this to look like?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
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…

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.

Join & Ask a Question