Solved

HTML Table with large text but cant get rid of padding

Posted on 2014-01-14
10
325 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
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 52

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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Kill default webkit margin!  Please! 6 22
Apply tab index in forms 6 33
html input type 3 21
Overlap photo won't go all the way to the right 1 8
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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).

911 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now