Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML Table with large text but cant get rid of padding

Posted on 2014-01-14
10
Medium Priority
?
336 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 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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