Solved

HTML Table with large text but cant get rid of padding

Posted on 2014-01-14
10
322 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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 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

10 Experts available now in Live!

Get 1:1 Help Now