tinfanide Posted October 21, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
davej Posted October 21, 2016 Share Posted October 21, 2016 Where is actual code? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 21, 2016 Share Posted 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 21, 2016 Share Posted October 21, 2016 It's either a CSS rule with higher precedence or the "headings" in your table are actually <td> elements. Link to comment Share on other sites More sharing options...
tinfanide Posted October 22, 2016 Author Share Posted 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2016 Share Posted 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 Link to comment Share on other sites More sharing options...
tinfanide Posted November 2, 2016 Author Share Posted November 2, 2016 Yes, I see. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now