Jump to content
tinfanide

CSS <th>: font-size?

Recommended Posts

th {
    font-size: 30px; /* doesn't work */
}


td {
    font-size: 20px; /* works for both <th> and <td> */
}

I'd like to ask why the font-size of <th> and <td> must be the same.

Thanks for any help.

Share this post


Link to post
Share on other sites

Unless you have a selector with hierarchy which gives it a greater precedence such as

     table th, table td  {
                font-size: 20px; /* works for both <th> and <td> */
            }

Your th and td elements should be different font-size.

Share this post


Link to post
Share on other sites

It's either a CSS rule with higher precedence or the "headings" in your table are actually <td> elements.

Share this post


Link to post
Share on other sites

@davej

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>
</head>
<style>

th {
    font-size: 30px; /* doesn't work */
}


td {
    font-size: 20px; /* works for both <th> and <td> */
}

</style>

<script type="text/javascript">
var xmlhttp;
var Staff, obj;
var url = "staff.json";

function init()
{	
	xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ? new ActiveXObject("Msxml2.XMLHTTP") : null ;
	xmlhttp.onreadystatechange = function()
	{	
		if (this.readyState == 4 && this.status == 200)
		{			
			Staff = JSON.parse(this.responseText);
			var table = document.createElement("table");
			document.body.appendChild(table);
			
			obj = Staff.Staff[0];
			for (var y in obj) 
			{
				var header_row = document.createElement("th");
				var column = document.createElement("td");
				var data = document.createTextNode(y);
				column.appendChild(data);
				header_row.appendChild(column);
				table.appendChild(header_row);
			}			

			for(var x=0; x<Staff.Staff.length; x++)
			{
				obj = Staff.Staff[x];
				var row = document.createElement("tr");
				
				if (x%2 == 0) row.setAttribute("class","even"); 
				
				for (var y in obj) 
				{
					var column = document.createElement("td");
					var data = document.createTextNode(obj[y]);
					column.appendChild(data);
					row.appendChild(column);
					table.appendChild(row);
				}
			}									
		}
	};
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

window.onload = init;
</script>

<body>
</body>
</html>

The table is generated through JavaScript and JSON.

Share this post


Link to post
Share on other sites

Yes, I see. Thanks.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...