Issue
I'm new to HTML and CSS. The problem that I'm facing is change font in a specific th or td line. I'll try to explain in the code.
How to use CSS to choose the specific table cell to change style without JavaScript then use an attribute to put the style.
The code:
<style>
table, th, td {
border: 3px solid white;
border-collapse: collapse;
}
th, td {
padding:10px;
}
</style>
<body style="color:white;background-color:black">
<html>
<table>
<tr>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
<th>dummy</th>
</tr>
<tr>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
</tr>
<tr>
<td>dummy</td>
<!--Part need to change style from this line--><td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td><!--to this line-->
</tr>
</table>
The comment part is to select the specific td then end select at the last comment.
I already used the tbody tag, but it doesn't work. Span and div tag don't work either.
How can I change the style from that part or need any tag?
Solution
Hope, this helps. Use nth-child and learn how to use it as selector.
table,
th,
td {
border: 3px solid white;
border-collapse: collapse;
}
th,
td {
padding: 10px;
}
body {
color: white;
background-color: black;
}
tr:nth-of-type(2) td:nth-of-type(2) {background:yellow; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(3) {background:pink; font-family: 'comic sans ms'}
tr:nth-of-type(2) td:nth-of-type(4) {background:blue; font-family: 'times new roman'}<table>
<tr>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
</tr>
<tr>
<td>dummy</td>
<!--Part need to change style from this line-->
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
<!--to this line-->
</tr>
</table>Answered By - Deadpool
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.