I want my whole table to have "center" text-align, besides some specific cells to have "right" text-align. In my code, the one cell is being more specifically targeted by CSS, yet the more general assignment is overriding. Why is this and how do I fix it?
.data td {
text-align: center;
}
.animal {
text-align: right;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
CSS selectors are interpreted from least to most specific, so increase the specificity of your CSS selector to get it working.
I would recommend against using !important, because it will make that CSS more difficult to add to / override in the future.
There is also a helpful MDN article on CSS specificity, which may help you understand why your CSS isn't overriding other rules as you would expect.
.data td {
text-align: center;
}
.data td.animal {
text-align: right;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
The .data td will be overriding .animal as it has more control Make similar
.data td {
text-align: center;
}
.data .animal {
text-align: right ;
}
<table class="data">
<tr>
<th>Type of Animal</th>
<th>Favorite Food</th>
</tr>
<tr>
<td class="animal">Cat</td>
<td>Mouse</td>
</tr>
</table>
Related
When I am using
.right-align {
text-align: right !important;
transform: translateX(-40%);
}
The Table structure is showing below
<table>
<thead>
<tr>
<th>Bid
</th>
<th>Offer
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="right-align">
200
</div>
</td>
<td>
<div class="right-align">
221
</div>
</td>
</tr>
</tbody>
</table>
The td is overlapping the th element as seen below
How can I can make it go under the header ?
This is happening when table is scrolling
It is very hard to answer the question as it is, however, the table should keep its proportions and structure as long as you keep the code tight:
.right-align {
text-align: right !important;
}
<table>
<thead>
<tr>
<th>Bid</th>
<th>Offer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="right-align">200</td>
<td class="right-align">221</td>
</tr>
</tbody>
</table>
It is nebulous why you decided to use the transform: translateX(-40%); rule in there, but it seems you may be trying to overwrite some rules that come from a theme hence the problem you are facing; If you update your question and add more pieces of code or at least what you are trying to achieve then i could be more helpful :). Also if you are using a framework or theme specify which one.
EDIT.
I saw your updates, you don't need to add a div within the td element to apply a class, you can do it directly in the td element. However, it seems that some css rules are overlapping. Maybe a screenshot of the results in a browser could be helpful.
I want to add a class to a parent DIV that affects lots of inner elemnets. But when I do this with Bootstrap, the styling gets messed up.
This code shows the problem on 2 where you can see the bottom border is missaligned. If I just do a .toggle(".second") on the element instead, it will work.
https://www.bootply.com/KOJ4VKNbOa
.second {
display: none;
}
.show-inner .second {
display: block;
}
<div id="outer">
<table class="table">
<thead>
<tr>
<th class="first">A</th>
<th class="second">B</th>
<th class="third">C</th>
</tr>
</thead>
<tbody>
<tr>
<td width="98%" class="first">1</td>
<td width="1%" class="second">2</td>
<td width="1%" class="third">3</td>
</tr>
</tbody>
</table>
</div>
<button onclick="$('#outer').toggleClass('show-inner');">Toggle .second</button>
In my project I would like to have many dependencies of that outer DIV class, so getting it to work would save me lots of code.
use display: table-cell instead of block.
.show-inner .second {
display: table-cell;
}
I have class definition:
.small, td.small, td.small > nobr, td.small > a
{
font-size: 90%;
}
The purpose is to make text smaller. That should be applied to anything: text in anchor, text in cell, etc.
But in fact, style is applied TWICE if anchor is inside of the cell:
<table>
<tbody>
<tr>
<td class="small">
VERY small content
</td>
<td class="small">Smaller text - looks as required</td>
</tr>
</tbody>
</table>
Why? How to make sure that style is applied only once?
Thank you.
Just remove the last part of the style, td.small > a. Then it will get applied to everything inside the <td>. Note, I changed the size of the font to 60% just so that the size change is apparent.
.small, td.small, td.small > nobr
{
font-size: 60%;
}
<table>
<tbody>
<tr>
<td class="small">
Small content
</td>
<td class="small">Should be smaller as well</td>
</tr>
</tbody>
</table>
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.
Is there a way to put some CSS into the BODY part of my html page without using inline CSS?
e.g.: I want to make all elements of one table red. Downside here: need same style=".." for every TD.
<table>
<tr>
<td style="background-color:#f00">RED</td>
<td style="background-color:#f00">RED</td>
</tr>
</table>
If you want all 'td' elements of one specific table with a specific css style, you should use this code:
html:
<table id="tableOne">
<tr>
<td>red background</td>
<td>red background</td>
</tr>
</table>
<table>
<tr>
<td>blank background</td>
<td>blank background</td>
</tr>
</table>
css:
#tableOne td{
background-color: #FF0000;
}
<table class="myClass">
<tr>
<td>RED</td>
<td>RED</td>
</tr>
</table>
And your css class myClass:
.myClass td
{
background: #F00;
}
To keep all the code within the body you could use javascript to first find all TD's then apply the background color:
<script>
var cells = document.getElementsByTagName("td");
for (var i=0; i<cells.length; i++) {
cells[i].style.backgroundColor = '#c0c0c0';
}
</script>
In an embedded or external style sheet:
td { background: #F00; }
That's all.