I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
Related
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}
I have a table with rounded corner, and I've put an overflow: hidden CSS command on it so that the corners of the individual cells don't protrude out. It works fine on Chrome, but not on Firefox. Can someone tell me what's wrong?
<style>
table {
border-spacing: 0px;
border: 1px solid #222;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
overflow: hidden;
}
th {
height: 30px;
color: #fff;
background: #222;
text-align: left;
}
tr:nth-child(even) {
background: #245876;
color: #fff;
border: none;
height: 25px;
}
tr:nth-child(odd) {
height: 23px;
}
.pos {
width: 50px;
}
.name {
width: 175px;
}
</style>
<table>
<thead>
<tr>
<th class="pos"></th>
<th class="name">Name</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pos">1</td>
<td class="name">Bob</td>
<td class="amount">1324353</td>
</tr>
<tr>
<td class="pos">2</td>
<td class="name">John</td>
<td class="amount">10611</td>
</tr>
<tr>
<td class="pos">3</td>
<td class="name">Bill</td>
<td class="amount">3270</td>
</tr>
<tr>
<td class="pos">4</td>
<td class="name">Brian</td>
<td class="amount">1950</td>
</tr>
<tr>
<td class="pos">5</td>
<td class="name">Dan</td>
<td class="amount">1760</td>
</tr>
</tbody>
</table>
The spec does not require the behavior you are looking for: "The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to." (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)
It is possible it simply will not work in Firefox. If that's the case, you could apply border-radius to the header cells (:first-child and :last-child in the header row), but it doesn't always line up properly. A bit of a PITA, I know.
thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }
This might help. How to make CSS3 rounded corners hide overflow in Chrome/Opera
Add where you want:
-moz-overflow: hidden;
I like Pete Scott's answer. But depending on your design, you can create the radius effect on a table by wrapping the table itself in a containing element that has the radius left and right, overflow hidden. Then, position relative the table, and -*px to create the required visual effect. But without seeing the desired end result, I am unable to provide an example.
It's possible to change the effect of overflow on the table element with the following trick: change the display of the table, e.g., to inline-block (this value preserves the shrink-fit width of the table and shouldn't break the layout assuming the table is surrounded by block elements). The resulting rendering will be equivalent as if the table has the div wrapper with border-radius and overflow, which renders in Firefox without problems. Here is the JSbin example.
I want to use css to change the property of the <tr> contents, like give it a red border. However doing the below code doesnt work on <tr>, but works on <td>. Did something go wrong?
CSS:
#leaderboard tr {
border: 1px red solid;
}
.leaderboard {
border: 1px red solid;
}
HTML:
<table id="leaderboard">
<tr class="leaderboard"><td>Hello</td></tr>
<tr class="leaderboard"><td>There!</td></tr>
</table>
Imho you can't give the tr border properties because only the individual cells have borders (in IE).
So the most simple solution would be to give the table left and right border and the cells top and bottom ones.
#leaderboard {
border: 1px red solid;
}
#leaderboard td {
border-top: 1px red solid;
border-bottom: 1px red solid;
}
Works fine in Chrome and Firefox. Are you using a modern, standards-compliant browser?
This works in IE8, FF5.
<style type="text/css">
.td{
border:1px solid red;
border-top:0;
height:28px;
}
</style>
<table width="300px" style="border-top:1px solid red;border-right:1px solid red;" cellpadding="0" cellspacing="0">
<tr>
<td class="td" style="width:50px;">head1</td>
<td class="td" style="width:50px;">head2</td>
</tr>
<tr>
<td class="td">cell1</td>
<td class="td">cell2</td>
</tr>
</table>
To my understanding, TR doesn't take up layout space the way other elements might. You'd be well advised to trade your tables/tr/td structure with nested, classed DIVs, like so:
<div id='leaderboard'>
<div class='leaderboard'>Hello</div>
<div class='leaderboard'>There</div>
</div>
There's nothing that you can do with tables that you can't do with divs, but conversely there's a lot divs CAN do that tables can't.
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}
Can I place a background image using CSS on a <tr> tag? Will this background image show across all browsers?
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
table {
width:300px;
height:200px;
border:3px solid blue;
}
tr {
background-image:url(http://dummyimage.com/300x200/f00/000);
display: block;
height: 100%;
}
Live demo: http://jsfiddle.net/simevidas/Jk5BE/5/
Source: http://code.google.com/p/chromium/issues/detail?id=44361
For this to work, you have to set the row height. In my demo, I've set it to 100%, because there is only one row in my table. If you have multiple row, set the height of the row to the height of the background-image.
Yes. And it'll show on all modern browsers.
You can either use the background attribute or do it with CSS.
If you're using it for HTML emails, then it won't show in Outlook 2007 or later, as they use Microsoft Word as the rendering engine. Why? God knows. But they do.
This is tricky. It looks to me like the background image applied in CSS to a tr element gets repeated on each table cell even if you say don't repeat. So if the image isn't a simple gradient with right to left symmetry, you may not get what you expect. Here is an example:
http://jsfiddle.net/Bx998/1/
HTML
<table id="tbl1">
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
<tr>
<td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>size</td>
</tr>
</table>
CSS
#tbl1 tr{
background: transparent url('http://www.google.com/images/logos/ps_logo2.png') no-repeat;
}
#tbl1 tr td{
padding: 5px;
height: 50px;
border: 1px solid #888;
}
#tbl1 tr td:first-child{
padding: 0 0 0 50px;
}