#table1
{
font-family: Calibri;
font-size: 12pt;
font-style: normal;
text-align:center;
width:500px;
border-collapse: collapse;
border: 3px solid orange;
margin-right:80px
}
table,th,td{
font-family: Calibri;
font-size: 12pt;
font-style: normal;
text-align:center;
width:500px;
border-collapse: collapse;
border: 3px solid red;
margin-right:80px
}
i am using 2 different types of table,with 2 different color, but whenever i try to put th,td in anyone of the table,all the tables get same color as that of th,td table.
how to customize each table?
SAMPLE TABLE FIDDLE
<table class="mytable"></table>
.mytable, mytable.th, mytable.td
{
//some codes
}
<table id="table1"></table>
#table1
{
//some codes
}
You can use as follow
//css
.table1{
//table1 style
}
.table1 th{
//th style for table1 class
}
.table1 td{
//set color for table1
}
.table2{
}
.table2 th{
//set your color
}
.table2 td{
//set color for table1
}
//html code
<table class="table1">
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
<table class="table2">
<tr>
<th>.... </th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
Related
Trying to use power automate to create tables and add styling to them in the body of an email. The last part of my project involves getting the first column of the table (name column) to have an orange background but I cannot seem to get the CSS working for this.
Style sheet:
<style>
table{
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td, th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
table tr td:nth-child(1)
{
background-color: orange;
}
</style>
HTML output from PowerBI's HTML table action:
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td> <-- this column needs to be orange
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
You can try something like this:
table {
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td,
th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
tbody tr td:first-child {
background-color: orange;
}
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
<th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
So you can use the nth-child, this is gonna be helpful
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child?retiredLocale=de
Please help, I can't figure out how to get rid of this border underline. It's nowhere to be found in Chrome's Inspect. I've tried everything I could find in the forums but no luck so far.
I'm unable to reproduce it using a fiddle, but here's the live site
HTML
<table class="table table-1" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="table-header cell-left">Actives</th>
<th class="table-header cell-right">Percentage (%)</th>
</tr>
<tr>
<td class="table-data cell-left">Caster Oil</td>
<td class="table-data cell-right">25</td>
</tr>
<tr>
<td class="table-data cell-left">Peppermint Oil</td>
<td class="table-data cell-right">0.5</td>
</tr>
<tr>
<td class="table-data cell-left">Cinnamon Oil</td>
<td class="table-data cell-right">0.25</td>
</tr>
</table>
CSS
.table {
color: $Blue;
border: none;
border-collapse: collapse;
border-spacing: 0;
background-color: white;
}
th {
font-family: 'PPsans', Fallback, sans-serif;
font-size: 15px;
text-transform: uppercase;
}
td {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-transform: capitalize;
padding: 5px 0;
}
.cell-right {text-align:right;}
.cell-left {text-align: left;}
You have tr:first-child th:after, tr:first-child td:after with border-bottom: 1px solid #1c1d1d; which creates that border.
You can override this using:
tr:first-child th:after, tr:first-child td:after {
border: none;
}
Make sure this goes after the previous code (or edit the original css file).
tr:first-child th:after, tr:first-child td:after{
border-bottom: none !important;
}
if you have custom css file then use !important
I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.
This is what I have so far: https://jsfiddle.net/J7VBV/220/
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
</tr>
</table>
The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.
Also, is there a better way of bolding the numbers?
Use this
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
td small{
font-size:7pt;
font-weight:bold;
}
td strong{
font-size:18pt;
font-weight:bold;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
<td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
<td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
</tr>
</table>
You can use CSS to make the font smaller.
font-size: 10pt;
Just replace 10pt with whatever size you want to use.
I would use a CSS class like:
.small {
font-size: 10pt;
}
and add
class="small"
to the text you want to be small
You can do like this.
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.cap{
font-size:8px;
font-weight:normal;
}
td{
font-weight:bold;
font-size:22px
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
</tr>
</table>
Adjust the font-size accordingly as needed
try this https://jsfiddle.net/fd9x06jq/
table.avatarStats tr td strong{
font-size:9pt;
font-weight:bold;
color:black
}
Although I'd advise some changes to your markup, add this to you CSS:
table tr td:last-child{
font-size: 8pt;
}
EDIT:
My first code was off. Now it's correct. Here's a fiddle
Updated your code here: https://jsfiddle.net/70gtky65/1/
<table class="avatarStats">
<tr>
<td>RECENT WR<br/><span>61%</span></td>
<td>OVERALL<br/><span>55%</span></td>
</tr>
<tr>
<td>RECENT WN8<br/><span>2469</span></td>
<td>OVERALL<br/><span>1737</span></td>
</tr>
</table>
<style type="text/css">
table.avatarStats {
border-spacing: 0px;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 108px;
}
table.avatarStats td {
font-size: 7px;
width: 50px;
padding: 2px;
}
table.avatarStats td span {
font-size: 16px;
}
table tr td:first-child {
background-color: #7842B3;
}
table tr td:last-child {
background-color: #459ABD;
}
</style>
You should try to avoid inline CSS and here is why
I am new in CSS.I have a Table Like this
<table id="datatable">
<tbody>
<tr>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
And I need to style this table as shown below.I have tried something but I can't able to style like that
I just tried
.datatable td {
border-bottom: 1px solid black;
}
Based on the image below,I need first td border as green and others are black.
Can any one help?Thanks in advance for help.
In your code, datatable is an ID not a class. Update your CSS like below.
#datatable tr:first-child td{
border-bottom:1px solid green;
}
#datatable tr td{
border-bottom:1px solid black;
}
#datatable
{
border-collapse:collapse;
}
DEMO
try this one
<table class="datatable">
<tbody>
<tr>
<td ><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
<tr>
<td><strong>2011</strong></td>
<td> </td>
<td><strong>147</strong></td>
</tr>
<tr>
<td><strong>2010</strong></td>
<td> </td>
<td><strong>137</strong></td>
</tr>
<tr>
<td><strong>2009</strong></td>
<td> </td>
<td><strong>303</strong></td>
</tr>
</table>
In css
.datatable td{
border-bottom:1px solid black;
}
.datatable
{
border-collapse:collapse;
}
.datatable tr:first-child td{
color:green;
border-bottom:1px solid green;
}
You can see it from here
http://jsfiddle.net/ZKv68/2/
use this css
DEMO
.green {
color: green;
}
#datatable td {
border-bottom: 1px solid black;
}
#datatable {
border-collapse: collapse;
}
look here
#datatable{
border-collapse:collapse;
}
#datatable td{
padding-left:4px;
padding-right:4px;
}
#datatable tr{
color:#444444;
border-bottom:2px solid #999999;
}
#datatable tr:first-child{
color:green;
}
. represents class..# represents id...so, change .database to #database in css.
try this:
<tr class=green>
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
<tr class=black>
<td><strong>2012</strong></td>
<td> </td>
<td><strong>159</strong></td>
</tr>
and in css:
#datatable tr.green {
border-bottom: 1px solid green;
}
#datatable tr.black {
border-bottom: 1px solid black;
}
Add following CSS in your styles
#datatable{
border-collapse: collapse;
}
#datatable td{
border-bottom:1px solid black;
color:#000;
}
#datatable tbody tr:first-child td{
color:#00FF00;
}
here is a live example
http://jsfiddle.net/Ycyyn/
You have a mistake in your CSS. Use #datatable instead of .datatable.
Apply a class or ID to your first row and use something like:
<tr class="green">
<td><strong>2013</strong></td>
<td> </td>
<td><strong>144</strong></td>
</tr>
CSS:
.green{
color:green;
}
You can also use
table tr:first-child {
color:green;
}
instead
If you are using id, then you need to use # to reference it in CSS. Dot is for class.
To reference just the first row, you can use 'first-child'
Example:
#datatable td{
border-bottom:1px solid black;
}
#datatable tr:first-child td {
border-bottom:1px solid green;
}
First of all <table id="datatable"> here you declare an ID and in your CSS .datatable td a class. You have to use # for selecting IDs
Just add this CSS:
#datatable tr:first-child td{
border-bottom:1px solid green;
color:green;
}
#datatable td{
border-bottom:1px solid black;
}
#datatable {
border-collapse: collapse;
}
DEMO
I need your help.
It seems that my TD cell is not respecting the overflow: hidden in the CSS. I've done everything recommended with the fixed layout of the table as well as specifying the widths of the TH's and TD's
Any ideas?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues
DEMO