prevent nth child from selecting element inside nested div - html

I am creating a dynamic html page which result in a code similar to below:
<!DOCTYPE html>
<html>
<head>
<style>
.ini table, th, td {
border: 1px solid grey;
}
#hello table.tk-dtbl tbody tr td {
background-color: white;
}
#hello tbody>:nth-child(2){
height: 130px;
}
</style>
</head>
<body>
<div id ="hello">
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>This</td>
<td>
<div class="ini">
<table style="width:100%" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>fifth</td>
<td>sixth</td>
</tr>
<table>
</div>
</body>
</html>
Check the html rendered here
I want only the second row Containing third fourth to be of size 150px and not the second row inside class ini is there any way to prevent nth-child from modifying content inside div ini.
Also border property of ini is used in id ="hello" can that be prevented using html and css only.
Edit:
the table I am printing is dynamic one i.e.
it's code is something like
<uitk-tab-panel >
<uitk-dynamic-table id="hello" [model]="MyDetailModel"
[modelObservable]="MyDetails$"></uitk-dynamic-table>
</uitk-tab-panel>
values are present in MyDetailModel so cannot directly modify it.


You an modify the code as below to output the requirement. Add a new id for that specific which contain third and fourth. Also have a control over ini border by editing the css.
/** CSS **/
table, th, td {
border: 1px solid grey;
}
tr#h-150 {
height: 150px;
}
.ini table, .ini th, ini td {border: none}
<!-- HTML -->
<body>
<div id ="hello">
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr id="h-150">
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>This</td>
<td>
<div class="ini">
<table style="width:100%" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>fifth</td>
<td>sixth</td>
</tr>
<table>
</div>
</body>

Related

Add a table with borders to email

I've been using an email macro and one way to add body of the email is HTMLbody.
I want to add a table to the body of email.
<table style="width:100%" border = 5px>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Once I send, I get email without table borders.

Try adding an important style sheet to the TD elements like this (before the code)
<style> td {border:2px black solid !important} </style>
if you want the border just around the entire TABLE then use this instead
<style> table {border:2px black solid !important} </style>

How can I change the color of text in HTML table?

I need to do a project in school but we have to follow set example. How can I change text color in a table?
I have already tried many things but they only work with CSS or HTML5.
<center><table bgcolor="black" color="yellow" border =2 cell pading=30 cell spacing=10 >

You try this way:
<table style="color: yellow;" bgcolor="black">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
This is good to know that center tag obsoleted.

With plain HTML you would use an old and deprecated tag <font> as also you're using <center> which is also obsolete, but without CSS nor HTML5 ...
Here's how it'd look like :
<center>
<table bgcolor="black" color="yellow" border =2 cell pading=30 cell spacing=10 >
<tr>
<td>
<span>
<font color="yellow"> Testing</font>
</span>
</td>
</tr>
</table>
</center>

you can set style for your table:
table {
color: yellow;
background-color: black;
}
table td, th {
padding: 30px;
border: 1px solid white;
}
<table>
<tbody>
<tr>
<th>Name</th>
</tr>
<tr>
<td>Name 1</td>
</tr>
<tr>
<td>Name 2</td>
</tr>
</tbody>
</table>

Border around a specific column in a table in HTML

How do I put a border around a column in a table in HTML?
Do we use colspan for such functions?

Here's an example of a column border without styling the same column of each row.
See <colgroup> for more reference.
table {
border-collapse: collapse;
}
.outlined {
border: 1px solid blue;
}
<table>
<colgroup>
<col>
<col class="outlined">
<col span="3">
</colgroup>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
<tr>
<td>First</td>
<td>Yellow</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
<tr>
<td>First</td>
<td>Yellow</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
</tr>
</table>

HTML code
<table>
<tr>
<th>Expenses</th>
<th>Cost</th>
</tr>
<tr>
<td>iPhone 8</td>
<td>$1200</td>
</tr>
<tr>
<td>MacBook Pro</td>
<td>$2800</td>
</tr>
<tr>
<td colspan="2">Sum: $4000</td>
</tr>
</table>
CSS code
th, td {
border: 2px solid black;
}
You can also play around with table{border}

Use;
td { border: 1px solid #000000; }
colspan is to merge cells. For example; below line merges 2 cells
<tr><td colspan="2">Merged Column</td></tr>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

<html>
<head>
<title></title>
<style>
table, th, td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Raju</td>
<td>Kumar</td>
<td>22</td>
</tr>
<tr>
<td>Mohit</td>
<td>Sharma</td>
<td>20</td>
</tr>
</table>
</body>
</html>

How I can to make collision in table by row not by cells?

I want to avoid the resize of <table> when I write in a cell a long string.
This is the code from w3school:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill </td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
but if I write this:
<tr>
<td>Jill jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>Smith</td>
<td>50</td>
</tr>
then the cell which contains "Jill jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj" expand and merge the next cell.
What I want is: to do expand and merge by rows not by cell (i.e: when the cell need to expand it must to stop in border of the next cell and take rows to complete the string).
The expected output is:

You have to add table-layout:fixed to your <table> and setting the word-wrap property for your cells (<td>). Additionally to make sure the content of the cells stay at top you have to add vertical-align:top to your cells too!
See the following solution:
table {
table-layout:fixed;
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
td {
vertical-align:top;
word-wrap:break-word;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>JillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

How to hide the border for specified rows of a table?

I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:

I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:

Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>

You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily