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>
Related
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>
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>
I have a table that doesn't seem to take certain styles, whether they are in external stylesheet or embedded.
I added a script inside of the head tag and then styled the selector h4 still inside of the head tag.
These aren't applying to the h4 sections within the actual table and I am not sure what I am doing wrong.
I also have in an external stylesheet a main selector that is supposed to add background color outside of the table and it isn't doing that.
but it is also not applying to the table.
The problem of your h4 being unable to style is because
<h4><th>hello world</th></h4>
h4 { color: red; }
<h1>Table 1</h1>
<table>
<tr>
<h4><th>Firstname</th></h4>
<h4><th>Lastname</th></h4>
<h4><th>Age</th></h4>
</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>
The h4 should be inside of your table header
<th><h4>hello world</h4></th>
h4 { color: red; }
<h1>Table 2</h1>
<table>
<tr>
<th><h4>Firstname</h4></th>
<th><h4>Lastname</h4></th>
<th><h4>Age</h4></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>
Put the h4 tag inside the td tag
Your code:
<h4><td>The Fantastic Four</td><h4>
...
<h4><td>The Avengers</td><h4>
...
<h4><td>Justice League</td><h4>
...
Try:
<td><h4>The Fantastic Four</h4><td>
...
<td><h4>The Avengers</h4><td>
...
<td><h4>Justice League</h4><td4>
...
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>
Please consider this sample.
I want to change the color of all tables to red, except the ones which are inside a div with specific class named modal with css
The color of all tables should change:
<table>
.....
</table>
The table inside div modal should not be change:
<div class="modal">
<table>
.....
</table>
</div>
I used below css:
table:not(div.modal){
color : red;
}
https://jsfiddle.net/zLu5ygzo/
It seems quite simple but it does not work !
You should give this way:
:not(.modal) > table {
color: red;
}
Fiddle: https://jsfiddle.net/yrrw61u4/
:not(.modal) > table {
color: red;
}
<b> The color of table fonts must be red:</b>
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<p/>
<b>This is a table in a div with modal class and color must not be changed:</b>
<div class="modal">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
The filter selector is on the <div> and not on the <table>...
Else reset to use something like this:
table {
color: red;
}
.modal table {
color: black; /* Reset */
}
Fiddle: https://jsfiddle.net/wo40cpxo/
table {
color: red;
}
.modal table {
color: black; /* Reset */
}
<b> The color of table fonts must be red:</b>
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<p/>
<b>This is a table in a div with modal class and color must not be changed:</b>
<div class="modal">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
Preview
The correct way to do it :
table {
color : red;
}
.modal table {
color : black;
}
<b> The color of table fonts must be red:</b>
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<p/>
<b>This is a table in a div with modal class and color must not be changed:</b>
<div class="modal">
<table>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
See the Fiddle.