Solved

HTML Table with large text but cant get rid of padding

Posted on 2014-01-14
10
328 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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 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

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript/CSS: Detect if hue-rotate supported by browser 1 38
Changing Color of Page Section 4 21
Javascript_Set_dropdown_value 7 34
Else condition 9 19
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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.
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…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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