CSS <th>: font-size?

tinfanide · October 21, 2016

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.

davej · October 21, 2016

Where is actual code?

dsonesuk · October 21, 2016

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.

Ingolme · October 21, 2016

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

tinfanide · October 22, 2016

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

dsonesuk · October 22, 2016

You are creating th for row element, then td for columns, when it should always create tr for rows and th or td for columns

tinfanide · November 2, 2016

Yes, I see. Thanks.

Sign In

CSS <th>: font-size?

Recommended Posts

tinfanide

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

tinfanide

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

tinfanide

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity