I have the CSS below:
table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link{ font-weight: bold;}
and the html code below:
<table class="Table12" align="right">
<tr><td>test1</td>
<td>test2</td></tr>
<tr><td>test3</td>
<td>test4</td></tr>
</table>
All work fine and I set all table to bold font;
I just need to change the font of "test3" to normal font in CSS;
Is this possible??
try this in css:
table.Table12 td:nth-child(3) { font-weight: normal; }
forget it... didnt take in account the last line of your css code.
this one works fine:
table.Table12 tr:nth-child(2) td:nth-child(2) a { font-weight: normal; }
more details about nth-child syntax you can find here: How can I get the second child using CSS?
Nik's answer is right, you don't need to add that in the HTML, instead, you add it to the CSS. Should be added to the end.
Like so:
table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link{ font-weight: bold;}
/*Solution*/
table.Table12 td:nth-child(2) { font-weight: normal; }
That will work right away.
You can also add a class to it and you can recycle it for later use:
.normal-font{font-weight: normal}
And then in your html:
<table class="Table12" align="right">
<tr><td>test1</td>
<td>test2</td></tr>
<tr><td>test3</td>
<td>test4</td></tr>
</table>
Related
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 am auto-generating the HTML output using KDB. I would like to avoid labeling the html with classes if possible because I'd rather not re-work the KDB code. I tried using first-child, but it didn't work. Any other suggestions?
KDB:
.util.html.t:{[t]
if[not type[t] in 98 99h; :"Result not a table type!"];
r:"<table cellSpacing='0' cellPadding='2'>";
r:r,"<tr class='title'>";
r:r,(,/){"<th>",x,"</th>"} each string cols t;
r:r,"</tr>";
r:r,(,/){"<tr>",((,/){
if[type[x]=type[""]; x:`$x];
if[not type[x]=type[enlist ""];
x:string x;
if[x like "*[0-9]%"; :"<td class=\"centeralignum\">",x,"</td>"];
];
if[type[x]=type[enlist ""]; x:"," sv x];
:"<td>",x,"</td>";
} each x),"</tr>"} each 0!t;
r:r,"</table>";
:r;
}
CSS:
h3 { font-size: 16px; font-weight: bold; font-family: Calibri }
body { font-size: 12px; font-family: Calibri }
tr.title { background: lightblue repeat-x left bottom; font-weight: bold; border: 1px solid #000000;}
th {border: 1px solid black;}
table { border: 1px solid black; border-collapse: collapse;}
table td {border-left: 1px solid black; border-right: 1px solid black; width:125px;}
table td:first-child {font-weight: bold;}
td.centeralignum {text-align: center}
HTML
<table cellSpacing='0' cellPadding='2'><tr class='title'><th>name</th><th>a</th><th>b</th><th>c</th></tr><tr><td>bob</td><td>1</td><td>4</td><td>7</td></tr><tr><td>anna</td><td>2</td><td>5</td><td>8</td></tr><tr><td>ray</td><td>3</td><td>6</td><td>9</td></tr></table>
Using the HTML and CSS on Firefox that you gave worked for me. I even toggled the first-child property to make sure that it was causing it which it was. The first-child property has been supported for quite a while but it is worth checking here to see if your browser supports it.
You can go into developer tools on your browser and select the element in the inspector to see the styles that are being applied. If they are being overridden they will have a strikethough and you can also toggle properties or add new ones in the developer tools to see how they change the display
I am trying to achieve the following using bootstrap button and custom css. I am not sure how to add a separation with a button and have two sets of labels within it. So far, I am able to create a button with label in it.
Working codeply demo
DEMO
You can do this with mark-up (html) only:
<button>
<h4>Titel</h4>
<hr/>
<span>More</span>
</button>
But this will look a bit weird so by adding some css make it look better.
button span {
font-size: 0.7em;
}
button hr {
margin: 2px;
}
Try this,
Demo
.productButton.selected {
background-color: rgb(0, 146, 143);
color: #FFF;
}
.productBtnText{
font-size:25px;
border-radius:0;
width:100%;
border-bottom:2px solid #000;
}
.productButton{
border:2px solid #000;
margin:0px;
padding:0;
height: 100px;
width: 200px;
font-size: 15px;
white-space: normal;
position: relative;
}
Say I have a header and a list of 10 rows. How would I change the text color of rows 1-3 using a pseudo class?
tr:nth-child(odd) {
background-color: #a9cdeb;
}
tr td:last-child{
font-style: italic;
}
tbody tr: {
color: #FF0004;
}
Here is a Fiddle
You should try this.
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}
Demo
If my understanding is right, You can try this
tr:nth-child(odd) td{ /* select odd rows cell */
color: #fff; /* applied white color */
}
OR you can try this
tr:nth-child(-n+5) td{ /* this will include <th> rows so i have used -5 */
color: blue;
}
Updated Demo
Demo
You may try this
tr:nth-child(3),tr:nth-child(4),tr:nth-child(5){
color:red;
font-family: cursive;
}
It change both font and color.
DEMO
You can try this:
tr:nth-child(-n+5) td {
background-color: #a9cdeb;
}
Demo
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*/
}