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>
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.
How do I remove the extra line space between blocks of text? (i.e. January 29th and 31st cells in image).
And is there a way to remove padding from td so words could fill the cell width a little more? (i.e. "Observational" in week 2 topic cell to bottom left of image).
Here is some of the code:
th {
width=16.66%;
height: 30;
text-align: center;
}
td {
text-align: center;
font-size: 65%;
padding: 0;
margin: 0;
}
table {
table-layout: fixed;
margin: 0;
padding: 0;
}
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Week</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
</tr>
<tr>
<td style="line-height:1px;margin:0;"></td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
</td>
</tr>
<tr>
<td><b>Week 2: Chapters 2-3</b><br>(Observational Studies)</td>
<td></td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 1 Due</p><br>
<p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
</td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 2 Due</p><br>
<p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
</td>
</tr>
</table>
</div>
You have a <br> between your 2 p tags on each of those that is adding extra space. Just remove that.
If you want even less space you could also lower/remove the margin on your p tags
p {
margin: 0;
}
Not all of your CSS seems to be in your question here so other styles might be interfering also, but you can likely change the margin of the p tag to whatever you'd like.
To remove border gap between blocks in table, you need to add border-collapse: collapse in your table style.
<table border-collapse="collapse" border="1">
You have a <br> between your 2 p tags, remove margin: 0 on your p tag.
to add from an earlier comment.
there's a few elements with default margins and padding that you can reset , you can reset these at once for all of them with : * {margin:0;padding:0;} if it bothers you to mind each element.
To set a box away from another , you can also reset margin , or padding only to the few that matters . p+p is an option to add a margin top only from the second p appearing so you can remove the <br> to be used inside a piece of text or in between inline boxes.
You can also increase line-height if that's what you want at every line of text , usually line-height:1.6em is an average value for reading confort you can use.
CSS requires : in between rules and values, not = (there was a typo for th width ).
example with line-height and the sibbling selector + to remove the br tags , also a display reset on your b tag.
* {
margin: 0;
padding: 0;
}
p+p {
margin-top: 1em;
}
b {
display: block;
margin-bottom: 1em;
}
th {
width: 16.66%;
height: 30px; /* value was missing */
text-align: center;
line-height: 1.6em;
}
td {
text-align: center;
font-size: 65%;
padding-top:1em;
}
table {
table-layout: fixed;
}
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Week</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
</tr>
<tr>
<td style="line-height:1px;margin:0;"></td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">27</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">28</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">29</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">30</p>
</td>
<td>
<p style="font-size:95%;line-height:1px;margin:0;text-align:center;">31</p>
</td>
</tr>
<tr>
<td><b>Week 2: Chapters 2-3</b>(Observational Studies)</td>
<td></td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 1 Due</p>
<p style="color:blue;font-size:100%;">Chapter 2 Part 1 Prelecture Due</p>
</td>
<td></td>
<td>
<p style="color:red;font-size:100%;">HW Assignment 2 Due</p>
<p style="color:blue;font-size:100%;">Chapter 2 Part 2 Prelecture Due</p>
</td>
</tr>
</table>
</div>
if you want some reading :
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.
also usefull to know : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
I hope this helps you find more options you can have via CSS to set for your layouts.
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
Hi am trying to add a div above every <tr> but when i look at the html console the div are showing outside the table. below is the html code.
<table>
<div>
<tr><td></td></tr>
</div>
<div>
<tr><td></td></tr>
</div>
</table>
Is this not allowed? any help would be great.
<div> tag can not be used above <tr> tag. Instead you can use <tbody> tag to do your work. If you are planning to give id attribute to <div> tag and doing some processing, same purpose you can achieve through <tbody> tag. <div> and <table> are both block level elements. so they can not be nested.
For further information visit this page
For example:
<table>
<tbody class="green">
<tr>
<td>Data</td>
</tr>
</tbody>
<tbody class="blue">
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
secondly, you can put "div" tag inside "td" tag.
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Further questions are always welcome.
You can't put a div directly inside a table but you can put div inside td or th element.
For that you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:
HTML:-
<tr>
<td>
<div>
<p>I'm text in a div.</p>
</div>
</td>
</tr>
For more information :-
http://css-tricks.com/using-divs-inside-tables/
No, you cannot insert a div directly inside of a table. It is not correct html, and will result in unexpected output.
I would be happy to be more insightful, but you haven't said what you are attempting, so I can't really offer an alternative.
You can not use tag to make group of more than one tag. If you want to make group of tag for any purpose like in ajax to change particular group or in CSS to change style of particular tag etc. then use
Ex.
<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>
<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
In the html tables, <table> tag expect <tr> tag right after itself and <tr> tag expect <td> tag right after itself. So if you want to put a div in table, you can put it in between <td> and </td> tags as data.
<table>
<tr>
<td>
<div>
<p>It works well</p>
</div>
</td>
</tr>
<table>
If we follow the w3 org table reference ,and follow the Permitted Contents section, we can see that the table tags takes tbody(optional) and tr as the only permitted contents.
So i reckon it is safe to say we cannot add a div tag which is a flow content as a direct child of the table which i understand is what you meant when you had said above a tr.
Having said that , as we follow the above link , you will find that it is safe to use divs inside the td element as seen here
A div cannot be added inside tr but there's an alternate solution here.
I tried adding a div inside tr but it seems a td should be the immediate child of a tr for it to work properly.
Adding a div inside td works fine.
I suppose you are trying to add some background or border-radius for the whole tr. Here's how I achieved the similar result in my project.
I'm using colspan and flex property to achieve that.
.flex-container{
display: flex;
margin: 5px;
}
table{
border: 1px solid red;
}
tr{
border: 1px solid green;
padding: 5px;
}
.flex-container .col{
box-sizing: border-box;
border: 1px solid;
padding: 5px;
border-radius: 5px;
margin: 5px;
background: skyblue;
}
<table>
<tr>
<!-- Assuming you have 4 columns -->
<td colspan="4">
<div class="flex-container">
<div class="col"> Item 1 </div>
<div class="col"> Item 2 </div>
<div class="col"> Item 3 </div>
</div>
</td>
</tr>
</table>
The problem will happen whenever it will render on small device. Element <div> inside <td> will occurs in mobile responsive screen.
You could use display: table-row-group for your div.
<table>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
</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.