The following images are the rendering for the same page using the same browser (Chrome 25). The only difference is one page have a DOCTYPE (thus in Standars mode) and one doesn't (thus in Quirks)
Quirks:
Standards:
Both cells have vertical-align: middle, both images are display: inline-block.
Vertical-align is working in Quirks but not in Standards, why?
HTML
<table class="oppres" id="oppscore4">
<tbody>
<tr id="oppscore4-main">
<td><img src="images/gold.png"></td>
<td></td>
<td>0</td>
</tr>
<tr></tr>
<tr id="oppscore4-total">
<td></td>
<td>=</td>
<td>0</td>
</tr>
</tbody>
</table>
CSS
table.oppres{
height: 120px;
}
table[id^=oppscore]{
width: 80px;
font-size: 17px;
line-height: 1;
}
table[id^=oppscore] tr{height: 1em;}
table[id^=oppscore] img{height: 0.9em;}
table[id^=oppscore] tr:nth-last-child(2){height: auto;}
table[id^=oppscore] td:first-child{text-align: right;}
More than enough code to reproduce the issue.
The issue is not about vertical-align on <td> but on <img />
Quirks mode triggers a behaviour explained here:
Vertical alignment of an image is under certain conditions to the bottom of the enclosing box, not to the baseline of text. This happens when the image is the only content within an element, typically a table cell. This means that e.g. an image in a table cell is by default at the bottom of the cell in Quirks Mode (which is often what the author wants), whereas in Standards Mode there is a few pixels spacing below the image (unless one sets e.g. vertical-align: bottom for the img element).
The space you see in standard mode below the image is actually the space between the <td>'s box baseline and bottom (cf. http://www.w3.org/TR/CSS2/visudet.html#leading).
When vertical-align is bottom on <img /> its box' bottom is aligned with <td>'s box bottom, so there is no space anymore.
This question already has answers here:
CSS: how do I create a gap between rows in a table?
(12 answers)
Space between two rows in a table?
(30 answers)
Closed 3 years ago.
I have a table containing many rows. Some of these rows are class="highlight" and signify a row that needs to be styled differently and highlighted. What I'm trying to do is add some extra spacing before and after these rows so they appear slightly separated from the other rows.
I thought I could get this done with margin-top:10px;margin-bottom:10px; but it's not working. Anyone knows how to get this done, or if it could be done? Here's the HTML and I've set the 2nd tr in the tbody to class highlight.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr class="highlight">
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</tbody>
</table>
The border-spacing property will work for this particular case.
table {
border-collapse:separate;
border-spacing: 0 1em;
}
Reference.
Table rows cannot have margin values. Can you increase the padding? That would work. Otherwise you could insert a <tr class="spacer"></tr> before and after the class="highlighted" rows.
You can't style the <tr>s themselves, but you can give the <td>s inside the "highlight" <tr>s a style, like this
tr.highlight td {
padding-top: 10px;
padding-bottom:10px
}
This isn't going to be exactly perfect though I was happy to discover that you can control the horizontal and vertical border-spacing separately:
table
{
border-collapse: separate;
border-spacing: 0 8px;
}
line-height can be the possible solution
tr
{
line-height:30px;
}
I know this is kind of old, but I just got something along the same lines to work. Couldn't you do this?
tr.highlight {
border-top: 10px solid;
border-bottom: 10px solid;
border-color: transparent;
}
Hope this helps.
First of all, don't try to put a margin to a <tr> or a <td> because it won't work in modern rendering.
Solution 1
Although margin doesn't work, padding does work :
td{
padding-bottom: 10px;
padding-top: 10px;
}
Warning : This will also push the border further away from the element, if your border is visible, you might want to use solution 2 instead.
Solution 2
To keep the border close to the element and mimic the margin, put another <tr> between each of your reel table's <tr> like so :
<tr style="height: 20px;"> <!-- Mimic the margin -->
</tr>
A way to mimic the margin on the row would be to use the pseudo selector to add some spacing on the td.
.highlight td::before, .highlight td::after
{
content:"";
height:10px;
display:block;
}
This way anything marked with the highlight class will be separated top and bottom.
https://jsfiddle.net/d0zmsrfs/
Because margin is ignored on tr, I usually use a workaround, by setting a transparent border-bottom or border-top and setting the background-clip property to padding-box so the background-color does not get painted underneath the border.
table {
border-collapse: collapse; /* [1] */
}
th, td {
border-bottom: 5px solid transparent; /* [2] */
background-color: gold; /* [3] */
background-clip: padding-box; /* [4] */
}
Makes sure cells share a common border, but is completely optional. The solution works without it.
The 5px value represents the margin that you want to achieve
Sets the background-color of your row/cell
Makes sure the background get not painted underneath the border
see a demo here: http://codepen.io/meodai/pen/MJMVNR?editors=1100
background-clip is supported in all modern browser. (And IE9+)
Alternatively you could use a border-spacing. But this will not work with border-collapse set to collapse.
You might try to use CSS transforms for indenting a whole tr:
tr.indent {
-webkit-transform: translate(20px,0);
-moz-transform: translate(20px,0);
}
I think this is a valid solution. Seems to work fine in Firefox 16, Chrome 23 and Safari 6 on my OSX.
Here's a neat way I did it:
table tr {
border-bottom: 4px solid;
}
That will add 4px of vertical spacing between each row. And if you wanted to not get that border on the last child:
table tr:last-child {
border-bottom: 0;
}
Reminder that CSS3 pseudo-selectors will only work in IE 8 and below with selectivizr.
I gave up and inserted a simple jQuery code as below. This will add a tr after every tr, if you have so many trs like me.
Demo: https://jsfiddle.net/acf9sph6/
<table>
<tbody>
<tr class="my-tr">
<td>one line</td>
</tr>
<tr class="my-tr">
<td>one line</td>
</tr>
<tr class="my-tr">
<td>one line</td>
</tr>
</tbody>
</table>
<script>
$(function () {
$("tr.my-tr").after('<tr class="tr-spacer"/>');
});
</script>
<style>
.tr-spacer
{
height: 20px;
}
</style>
A hack to give the appearance of margins between table rows is to give them a border the same color as the background. This is useful when styling a 3rd party theme where you can't change the html markup. Eg:
tr{
border: 5px solid white;
}
add a div to the cells that you would like to add some extra spacing:
<tr class="highlight">
<td><div>Value1</div></td>
<td><div>Value2</div></td>
</tr>
tr.highlight td div {
margin-top: 10px;
}
You can create space between table rows by adding an empty row of cells like this...
<tr><td></td><td></td></tr>
CSS can then be used to target the empty cells like this…
table :empty{border:none; height:10px;}
NB: This technique is only good if none of your normal cells will be empty/vacant.
Even a non-breaking space will do to avoid a cell from being targetted by the CSS rule above.
Needless to mention that you can adjust the space's height to whatever you like with the height property included.
Another possibility is to use a pseudo selector :after or :before
tr.highlight td:last-child:after
{
content: "\0a0";
line-height: 3em;
}
That might avoid issues with browser that don't understand the pseudo selectors, plus background-colors are not an issue.
The downside is however, that it adds some extra whitespace after the last cell.
For what is worth, I took advantage that I was already using bootstrap (4.3), because I needed to add margin, box-shadow and border-radius to my row, something I can't do with tables.
<div id="loop" class="table-responsive px-4">
<section>
<div id="thead" class="row m-0">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div id="tbody" class="row m-0">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</section>
</div>
On css I added a few lines to mantain the table behavior of bootstrap
#media (max-width: 800px){
#loop{
section{
min-width: 700px;
}
}
}
add this style before the class="highlighted"
padding-bottom and
display is inline-table
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
<table class="schedule">
<thead>
<tr>
<th id="first-column">#</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
</table>
and
table.schedule {
table-layout: fixed;
width: 900;
}
#first-column {
width: 200px;
padding: 0 10px;
}
cause the first column has 200+10+10=220px width in Firefox, but 180+10+10=200px in Chrome and Safari. I think the width shouldn't include padding, so Firefox is right? But anyway, how can I set the same column width across browsers?
Edit: the Chrome Developer Tools look like:
Make sure you have a modern doctype specified as I'm not seeing the described behaviour on my end. For example use <!DOCTYPE html> to tell the browsers it's HTML5. For me the first column is 200px + padding on Firefox, Chrome and Safari.
As it turns out I don't know CSS.
I ran into a brick wall after using Eric Meyer's CSS reset (http://meyerweb.com/eric/tools/css/reset/)
I have a table with this style
table.home_right_top, .home_right_top table, .home_right_top
{
background-color: #F2F2F2;
width: 100%;
padding: 10px 20px 15px 20px;
}
but the padding is not applied to the table at all and I cannot figure out why. I am happy that I see the same behavior on all the browsers including IE7 and IE8 but I don't see any padding. Can someone please tell me what I am doing wrong here?
Thanks.
EDIT
This is my table
<table class="home_right_top" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="blueHeading14 heading_padding_right" style="width: 64px">Products</td>
<td class="rpt_stroke" style="width: 280px"> </td>
</tr>
</tbody>
</table>
The problem isn't the reset, it's that the W3 CSS property spec states that padding can be applied to:
all elements except table-row-group,
table-header-group,
table-footer-group, table-row,
table-column-group and table-column
So it's invalid to apply padding to a <table>. Instead, the only solution that comes to mind is to apply margin instead, wrap the table in a <div>, or apply the padding to the individual <td>s with special classes.
Take a look at the last line in his css:
table {
border-collapse: collapse;
border-spacing: 0;
}
Try removing that and seeing what happens, table cells don't often act like block level elements. I think the real problem here is that you shouldn't style the table element like this, becasue it's display property by default is table which is not the same as the box model.
Try putting padding on the cells themselves or add a margin to the table.
Works fine for me. Did you declare a DocType?
You have to apply the style to the TD's not the table.
table.home_right_top td