Changing Table font in CSS

Question

I have the CSS below:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue;   width:200px;}
table.Table12 a:link{   font-weight: bold;}

and the html code below:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

All work fine and I set all table to bold font; I just need to change the font of "test3" to normal font in CSS; Is this possible??

score 2 · Accepted Answer · edited May 23 '17 at 12:27

2

try this in css:

table.Table12 td:nth-child(3) { font-weight: normal; }

forget it... didnt take in account the last line of your css code. this one works fine:

table.Table12 tr:nth-child(2) td:nth-child(2) a { font-weight: normal; }

more details about nth-child syntax you can find here: How can I get the second child using CSS?

edited May 23 '17 at 12:27

Community

1
1

answered Aug 27 '14 at 03:17

Nik Terentyev

2,270
3
16
23

how to refer to this in the html? – Abbas1999 Aug 27 '14 at 03:19
it should do the work without making any change in html – Nik Terentyev Aug 27 '14 at 03:21
I am testing it, not working? does it matter where I put this line in CSS? – Abbas1999 Aug 27 '14 at 03:23
wonderful Nik; this one changed test4; to change test3 just make the td child 1 instead of 2; thanks a lot... +1 and accept your solution... – Abbas1999 Aug 27 '14 at 03:37

gmslzr · Answer 2 · 2014-08-27T03:49:20.860

Nik's answer is right, you don't need to add that in the HTML, instead, you add it to the CSS. Should be added to the end. Like so:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue;   width:200px;}
table.Table12 a:link{   font-weight: bold;}
/*Solution*/
table.Table12 td:nth-child(2) { font-weight: normal; }

That will work right away.

You can also add a class to it and you can recycle it for later use:

.normal-font{font-weight: normal}

And then in your html:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php" class="normal-font">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

Yeah, it started counting from 0 rather than 1, I'll edit mine as well for future reference. Happy coding! — gmslzr, Aug 27 '14 at 03:49

Changing Table font in CSS

2 Answers2