I cannot understand what I have done wrong here. The css styles should be separate for both my tables however "rcorners1" table appears to be affected by the settings of "water_table"
I have two tables the css for first table
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {background-color: #ffffff;}
table.water_table th, td {
padding: 15px;
text-align: left;
}
My first table looks like
<table border="0" align="center" class="water_table" id="water_table">
The css for my second table
table.rcorners1 {
border-radius: 10px;
border: 1px solid #a4b3bd;
padding: 2px;
margin: 3px;
width: 120px;
height: 160px;
float: left;
}
my second table looks like
<table width="100%" border="0" class="rcorners1" id="rcorners1">
I do not know if this is the correct solution. What I did to correct the issue is to remove "water_table" from the css style file and created a style block within the html before my "water_table" appears.
<style>
table.water_table tr:nth-child(even) {background-color: #f2f2f2}
table.water_table tr:hover {background-color: #f5f5f5}
table.water_table th {
background-color: #ffffff;
/*color: white;*/
}
table.water_table th, td {
padding: 15px;
text-align: left;
}
</style>
Generally you don't want to put an inline style block inside your HTML - if you were to do so, it should be at the head of your document, not in the body.
However, if moving the styles is what solved the problem for you, this means that there's something else in your css file that's overriding your desired styles.
Often times you can see all of the styles associated with an element in a browser inspector. If you were to inspect your element I bet you would see some additional styles that are crossed out from your CSS file.
Related
using Power BI and Power Automate, I have created a flow smiliar to this tutorial (https://youtu.be/VnWg-Eox37Q) to send out my table as an html table in outlook.
The data itself is fine but now my problem is how to apply formatting to specific columns (for example the first 3 columns which are just dimension columns) should be left aligned instead of right and bigger column width, maybe even a line break.
The incoming data (rows) from Power-BI is dynamic and changing every interval.
But as far as I understood, Outlook is not supporting the n-th child selector in CSS you would use in this case. Do you know about any other easy work-arounds? Can't imaginge I am the first with this problem in Outlook.
Thank you for your time!
Edit #1: Added Code
So right now, considering I understood it correctly, it should font-align all column except the first 4 ones to the right. Works in an online tool like w3schools but not in Outlook.
<style>
table.table2 {
background-color: #FFFFFF;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.table2 td, table.table2 th {
border-left: none;
border-right: none;
}
table.table2 tr td + td + td + td +td {
text-align: right;
}
table.table2 tbody td {
font-size: 13px;
text-align: left;
border-bottom: 1px solid #4A929E;
}
table.table2 thead {
background: #4A929E;
border-bottom: 1px solid #FFFFFF;
}
table.table2 thead th {
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
border-left: none;
}
table.table2 tfoot td {
font-size: 13px;
}
</style>
I am experiencing errors when loading an html/css file. Here are the contents of the file:
<div style="overflow-x:auto;">
<table>
a bunch of tr/td ...
</table>
</div>
table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00008B;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
I see two errors: First, the horizontal scrollbar doesn't appear. Second, the even-numbered lines are the same background color as the odd-numbered lines. This behavior is consistent between IE 11 and Chrome 69.
What have I done wrong? How do I fix it?
You need to fix a couple of things:
On the table element, you can try setting it to display:inline-table; so that the width of the table won't be limited by the parent container. Add min-width:100%; if needed, and remove width:100%; to let it grow.
For the alternate background colors, for rows, apply tr:nth-child(even) {...} or tr:nth-child(even) td {...}; for columns, use td:nth-child(even) {...}
If you also have thead and/or tfoot and you only want to apply the colors to tbody, makes use to add tbody tr:nth-child(even) etc.
In addition:
You don't have to use <table>, other options:
Flexbox: .container {display:inline-flex;}
Inline-blocks: .container {white-space:nowrap;} .item {display:inline-block; vertical-align:top; white-space:normal;}
CSS table: .container {display:inline-table;} .item {display:table-cell;}.
Of course, either way you choose, keep the wrapper <div style="overflow-x:auto;"> there as needed.
I'm having trouble removing the inherited styles in a sub-table. My tables basically look like this:
<table class="twocoltable">
<thead>
<tr><th>BlahBlah</th></tr>
</thead>
<tr>
<td>blah</td>
<td>
<table class="nostyle">
<tr>
<td>stuff</td>
<td>stuff</td>
</tr>
</table>
</td>
</tr>
</table>
EDIT My .css now looks like this. The sub-table has no styles, but the parent table's td styles aren't working, but the th styles are working.
.twocoltable { border-spacing: 0px; padding: 0px; border: 1px solid #666666; }
.twocoltable>thead>tr>th { text-align: center; font-weight: bold; color: black; font-size: 12pt; padding: 4px; background-color: #DDD; }
.twocoltable>tr>td:first-child { text-align: right; vertical-align: top; font-weight: bold; color: black; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; border-right: 1px solid #BBBBBB; }
.twocoltable>tr>td:last-child { text-align: left; vertical-align: top; font-weight: normal; color: #333333; font-size: 9pt; padding: 4px; border-top: 1px solid #BBBBBB; white-space: nowrap; }
.nostyle * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
What I end up with at the end is a properly formatted parent table, but the sub-table also contains the formatting. It still has the bolding, borders, and alignment.
What am I missing?
Assign your styles only to your parent table's immediate children. This should work for properties like margin and padding. I.e.:
Instead of:
.twocoltable th
.twocoltable tr td:first-child
.twocoltable tr td:last-child
Do:
.twocoltable>thead>tr>th
.twocoltable>tr>td:first-child
.twocoltable>tr>td:last-child
However, other properties such as font-weight will still apply to child elements, because they are inherited. For those, you'll have to manually override in .nostyle definitions (which you haven't done). E.g.:
.nostyle {
font-weight: normal; // initial also works
}
EDIT:
Updating my answer with a general overview of what should be the final solution.
.twocoltable th {
// styles that will be applied to all th elements that live inside .twocoltable, including sub tables
}
.twocoltable tr td:first-child {
// styles that will be applied to all elements that are the first td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable tr td:last-child {
// styles that will be applied to all elements that are the last td of a parent and live inside .twocoltable, including sub tables
}
.twocoltable>thead>tr>th {
// styles that will be applied ONLY to th elements that are direct children of tr elements that are direct children of thead elements that are direct children of .twocoltable. This excludes sub table th elements
}
// You should have got the idea by now
.twocoltable>tr>td:first-child {...}
.twocoltable>tr>td:last-child {...}
.nostyle {
// Styles that override styles that are inherited from its parent element even when that style has not been directly applied to it (e.g. font-weight)
}
By using this notation: .twocoltable tr, you will apply that style to all children of .twocoltable that are tr, no matter how deep they are.
You can choose to get more specific by adding classes to your tr elements, etc. Or you can use the child selector, >. It ensures the style is only applied to immediate children: .twocoltable > tr.
By having more specificity with your CSS, a great summary is found linked here, it will take precedence. Maybe using an ID for your main table, and a class for your nostyle cells would be the best way to organize it?
<table id="twocoltable">
<table class="nostyle">
Another option, you can override with CSS using !important, a jsFiddle linked here.
I am learning how to create classes in CSS with MVC4 and Razor. I want to create a class for a table that is displayed on my home page with special markup classes for td elements with strikethrough, and some td elements bolded. I do not know how to create a class that belongs to another class. I feel that by making sub classes in my table class, I can keep more organized and clean CSS code.
I have a few questions.
How do I create a new table class that inherits from the base table?
Should I put new classes in a separate CSS file?
If answer to previous question is yes, then what do I need to do for
Razor and MVC4 to see the new file?
How do I create a td element under that new table and cause it to
inherit from the base td of the base table?
see code below
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-right: 0.4em;
}
th:first-child{
margin-left:0px;
}
th:last-child{
margin-right:0px;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
To address your questions:
How do I create a new table class that inherits from the base table?
If you do not have a css file that resets all style rules every element inherits from the browser default file. If you define style-rules for the table element table {....} and create another style rule .foo {} the css-rules for table.foo are composed by the default style, the defined style for the element and the specific style. You can test this out with the chrome developer tools and inspect element.
Should I put new classes in a separate CSS file?
No, unless you have a very good reason. Just to clarify - rule of thumb put all style rules in one file. But not each rule in a new seperate file.
How do I create a td element under that new table and cause it to inherit from the base td of the base table?
See above td {background-color: red} td.bgBlue {background-color: blue} and the html <td class="bgBLue"> But there are other ways. I would recommend you read a tutorial about the basic rules of css and inheritance of style rules.
Update
I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded. For strikethrough (css 2.1 or css 3) you can use text-decoration which seems to be not supported very well. Although it may be that the browser compability table is outdated because it worked in both browser i tested (IE11 and chrome31).
.isBold { font-weight: bold;}
.isStrikethrough {text-decoration:line-through; }
and the html
<table>
<tr><td class="isBold">bold</td></tr>
<tr><td class="isStrikethrough">one</td></tr>
</table>
There may be hacks for older browsers by using for example <del>your text</del> and overlaying a transparent image.
My css is located at http://sillybean.net/css/seaglass.css and i want to use this css for only one of html table, On the same page i have multiple html tables so i do not want to affect other html tables. What is the fastest way to do it with less modification on http://sillybean.net/css/seaglass.css ?
Can you just apply a class to the table you want to affect, then use that class in your CSS?
In your HTML, you can put:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
And then, add the class selector to your CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Define an ID or CLASS in your CSS that will affect the table in question.
Then, in your HTML code, say
<table id="theid"... />
or
<table class="theclass" ... />
The CSS ID looks like
#theid
{
//attributes
}
Classes look like:
.theclass
{
//attributes
}
This is exactly what id and class attributes are for. If you can't change the markup (like styling myspace) then you need to use selectors to target the one table more precisely. The choice of selectors is something you'll need to decide yourself.
For Multiple Table and Classes
HTML Table
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Here are class selectors and markup that will style the first table but not the second:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Or you can use an ID selector in a similar fashion:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Sometimes a religious war breaks out about which of these two approaches to use. Either is fine for your needs. According to the spec, you can only put a given ID on at most one element in your HTML (but most browsers allow you to break that rule).
Apply the Class name to the table on which you want to apply css rest is fine...
While you should add a class to the table you want to affect, let's assume you can only modify the css. In that case you can get pretty fancy with selectors. But not all the browsers support them. You can see that the CSS 2 selectors don't support the n-th child concept. Otherwise, if you had html like:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
You could target the first with CSS2 selectors, but the second and third can only be targeted with CSS3 ones.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
Select table by class for styling a desired table e.g if you have table:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Then in CSS, you will use something like this:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}