I'm setting a global font-size and line-height on my <body> tag, so all default body copy is 14px and a 1.3em line-height.
The problem is as I have tables that have a larger font-size, and instead of inheriting a relative line-height, it's taking the computed value from the <body> tag. As a result the text overlaps:
Here is a code pen: https://codepen.io/thedigitalmc/pen/xxZJjyy
<body>
<style type="text/css">
body {
font-size:13px;
line-height:1.3em
}
td {
font-size:30px
}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>This Is Text<br>On Two Lines</td>
</tr>
</tbody>
</table>
</body>
Is there a better way to do this, I don't really want to do body * {line-height:1.3em} but it seems the best solution.
Do not use the relative em unit if you want the line height to maintain a constant ratio with the font size. Simply set line-height: 1.3 instead.
body {
font-size:13px;
line-height:1.3;
}
td {
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>This Is Text<br>On Two Lines</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
i am new to HTML i am creating a table and i want table font size same as whole web page's font size so i added a font tag with size attribute.
this tag changed font size of ravery text on web page but table font is not affected
<html>
<head>
<title>use of table</title>
</head>
<body>
<center>
<font size="80" style="red"><p>Hello World this is a font check</p></font>
<table border="3">
<tr><td>Roll No</td> <td>195612</td> </tr>
<tr><td>Name</td> <td>Rajesh</td></tr>
<tr><td>Age</td> <td>23 (Twenty Three )</td> </tr>
<tr><td>Father's Name</td> <td> Nayar</td> </tr>
<tr><td>City</td> <td>Siwas Pali</td> </tr>
</table>
</center>
</body>
</html>
You can't do it that way. font-size is a CSS property.
To change the font-size of html elements you need to use some CSS like this:
<style>
p, table{
font-size: 20px;
color: red;
}
</style>
You can either add this to your code and remove the <font> tag or you can create a separate file and use it adding this inside your <head></head> tags:
<link rel="stylesheet" href="..url.." />
Here is the full example:
<html>
<head>
<title>use of table</title>
<style>
table{
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<center>
<p>Hello World this is a font check</p>
<table border="3">
<tr><td>Roll No</td> <td>195612</td> </tr>
<tr><td>Name</td> <td>Rajesh</td></tr>
<tr><td>Age</td> <td>23 (Twenty Three )</td> </tr>
<tr><td>Father's Name</td> <td> Nayar</td> </tr>
<tr><td>City</td> <td>Siwas Pali</td> </tr>
</table>
</center>
</body>
</html>
Hope this helps.
This always works for me
body,table { font-size:12px; }//or whatever size you wish to use
And As they have mentioned before, do all your styling in a CSS fole and link it to your project, thats the standard.
Try setting the font-size in the cell class, not the table class.
.my-table td{
font-size:11px;
}
<table class="my-table">
<tr>
<td>test
</td>
</tr>
</table>
This might be because of the fact that font tag is not supported by HTML 5. Set the font using CSS instead.
p{
font-size: 80px;
color: red;
}
<html>
<head>
<title>use of table</title>
</head>
<body>
<center>
<p>Hello World this is a font check</p>
<table border="3">
<tr><td>Roll No</td> <td>195612</td> </tr>
<tr><td>Name</td> <td>Rajesh</td></tr>
<tr><td>Age</td> <td>23 (Twenty Three )</td> </tr>
<tr><td>Father's Name</td> <td> Nayar</td> </tr>
<tr><td>City</td> <td>Siwas Pali</td> </tr>
</table>
</center>
</body>
</html>
Take a look at this fiddle https://jsfiddle.net/bala4kp/zxad0bc4/
I do support for an older, large website that was written without the DOCTYPE being set. The test example below shows the discrepancies, but is there a way to make the sizes render identically using the same style sheet?
(WHY?: Adding the DOCTYPE to this site will have to be a gradual and carefully tested implementation for the several thousand pages of code, and before I get started I'm seeing if it's possible to avoid maintaining two separate CSS sheets).
Source Code (with doctype):
<!DOCTYPE html>
<head><title>Untitled 1</title>
<style type="text/css">
input, div{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
input[type=text],input[type=password]{
border:1px #AAAAAA solid;
height:24px;
line-height:24px;
margin:0px;
padding:0px 0px 0px 3px;
}
</style>
</head>
<html>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="text" value="Too big with doctype" style="width:200px" onclick="alert(this.offsetHeight)">
</td>
<td>
<div style="height:24px;width:100px;background-color:#dddddd;">100 x 24px</div>
</td>
<td>
<input type="text" value="Too small without doctype" style="width:200px;height:22px" onclick="alert(this.offsetHeight)">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
<td>
<div style="height:24px;width:100px;background-color:silver;">100 x 24px</div>
</td>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
</tr>
</table>
</body>
</html>
So to me it appears that without the doctype, the sizes of text inputs render exactly as you specify them. But with the doctype, it adds the border and any padding to the height or width. Can I get around this without creating a separate stylesheet?
I can't get colspan to work when I use a fixed width (IE 7)? Why?!
Sample Code:
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
Help anybody? :(
it does, but you've limited the width. If you want, try creating another class called '.doubleSpanInputGroup' or something with width 500 and set that class onto the spanning column.
eg.
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
.inputGroup td.doubleInputGroup
{ width:500px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
EDIT: made the new style more hierarchical
Try making the rule apply to tr instead of td and make the width 500px instead, as such:
.inputGroup tr { width: 500px; }
The problem you're having is because you've set a limit on the td to be at most 250px wide, so the browser is simply following your instructions.
in general manner :
table tr:first-child td:first-child{ width:86px; }
if this is the only width all first column take this width and colspan in ie7 will work
I tried to set the width of the colspan cells to auto, seemed to work fine in IE7/8/9
.yourColSpanTD { width: auto !important; }
I'm trying to scale down an image by percentage and this renders correctly in Firefox, but not in Internet Explorer. The img tag needs to be inside a table.
<TABLE>
<TR>
<TD>
<img src="test.gif" width="60%" height="60%">
</TD>
</TR>
</TABLE>
Is there a better way to do this so it works in both browsers?
Try defining the dimensions in CSS instead:
<style type="text/css">
.myImg{
width:60%;
height:60%;
}
</style>
<table>
<tr>
<td>
<img src="test.gif" class="myImg" />
</td>
</tr>
</table>
I don't think some browsers like when you define width/height inline as anything but a numeric value (i.e., width="200");
Anyway, give that a shot - good luck
Check out the source on http://www.joelonsoftware.com/ - the images within articles scale quite nicely. Use FireBug to help you with figuring out the CSS that will accomplish the scaling you want.
Please try the following code:
<html>
<head>
<style>
table.full-width-table{
width:100%;
}
td.center-text-td{
text-align: center;
}
img.sixty-percent{
width:60%;
height:60%;
margin:0 auto;
}
</style>
</head>
<body>
<table class="full-width-table">
<tbody>
<tr>
<td class="center-text-td">
<img src="test.gif" class="sixty-percent"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="height:50px;background:red;">Header 1</td>
</tr>
<tr>
<td style="height:10px;background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.
It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).
Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.
Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.
It appears that you must use the height property of the table, and NOT do it via a style attribute.
How about adding position:fixed to the table? I tested it in IE8 and seemed to work.
Set the height of your last td to 100%:
<tr>
<td style="background:green;height:100%;">Content</td>
</tr>
Does this work:?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="50" style="background:red;">Header 1</td>
</tr>
<tr>
<td height="10" style="background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
If you're using this to layout a page why not use div's instead?
This sort of works:
<style>
.outer {
position:relative;
height: 100%;
width: 500px;
background-color: blue;
}
.top {
height: 30px;
background-color: red;
width: 100%
}
.middle {
height:30px;
background-color: green;
width: 100%
}
</style>
<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2
</div>
content3
</div>