Im having a weird issue on a table... I've set the border to be 0 in the css, i've set the border-color to be transparent, however, in the browser, it still shows a border on the top and on the left, which doesnt make any sense...
The table looks like <table cellspacing="0" style="border-width:0px;border-collapse:collapse;" id="gvTransactions" pagersettings="" rules="all" class="transaction-posts">
And the css looks like:
table.transaction-posts, table#gvTransactions {
border: 0 none transparent !important;
border-radius: 0 0 0 0;
}
As you can see, it still outputs a black border on the top, left and in every row, even though i've set the border to be 0...
In the table tag...add border="0"...if that doesn't work then check if any of the css is over-riding it, also post your code in jsfiddle.
The HTML attribute rules="all" in the table tag causes borders to be drawn on all sides of all cells. The HTML 4.01 spec says this somewhat vaguely, but this is how browsers interpret it. So if you don’t want any borders, remove that attribute.
If you want to have some of the borders but not all, you need to set them suitably. For example, if the border on the very top and on the very left is the problem (this is one interpretation of the question asked), then set
table#gvTransactions tr:first-child th, table#gvTransactions tr:first-child td {
border-top: none;
}
table#gvTransactions th:first-child, table#gvTransactions td:first-child {
border-left: none;
}
The first rule removes the top border of any cell in the first row. The second one removes the left border of any cell that is the first child of its parent, i.e. of the cells in the first column.
Related
With CSS, I'm trying to add 5px padding to tables which do not have the border attribute set to "0". To do this, I'm able to select these tables like this, and test it by making the background color of them red:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
background-color: red;
}
Also, this works to make all tables have padding:
td,th
{
padding: 5px;
}
However, I only want tables with borders to have padding, and this does not work:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
padding: 5px;
}
Does anyone see an issue here? Thanks in advance.
EDIT: I see the code I posted above actually works, I didn't realize that I left out code that broke it, but this is what I tried to get working:
table:not([border="0"]),table:not([border="0"])>tr,table:not([border="0"])>tr>td
{
border: 1px solid rgba(0,0,0,.25);
border-collapse: collapse;
padding: 15px;
}
The border-collapse:collapse; property seems to be causing this problem. Is there any way to have single borders between cells and padding at the same time?
A <table> always has a <tbody> if you don't specify one explicitly in the HTML.
(It would be different in XHTML, but this is HTML, not XHTML.)
Solution: also specify the tbody in the CSS selectors.
table:not([border="0"]), table:not([border="0"])>tbody>tr, table:not([border="0"])>tbody>tr>td
{
padding:15px;
}
See fiddle
By the way, you could remove the middle selector (ending in tr) from the rule, because it doesn't do anything. You can't give padding to table rows.
You say it does work with the first example in your post, but that isn't entirely true. Only the first selector works, giving the whole table the red background, and the other two are ignored, so the cells remain transparent.
Oh, and it's best to not use the border attribute any more. There was a dispute between the WHATWG and the W3C about whether it was still valid, but they finally agreed that it was obsolete.
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.
How can I set a border on a tr ?
My attempt, which doesn't work:
table tr {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>
Text
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/edi9999/VzPN2/
This is a similar question: Set border to table tr, works in everything except IE 6 & 7 , but it seems to work everywhere except for IE.
Add this to the stylesheet:
table {
border-collapse: collapse;
}
JSFiddle.
The reason why it behaves this way is actually described pretty well in the specification:
There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.
... and later, for collapse setting:
In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.
It is possible to emulate border in table border collapse separate mode with css box-shadow :
table tr {
box-shadow: 0 0 4px #ccc;
}
Besides what top answer says, you should also make sure your border has visible style, for example:
border-style: solid;
if you are adding custom styles to some website.
My last question was closed before I could get a full answer, so I'll phase this one a bit differently.
In Chrome, it appears that if you set a border-bottom on one table cell you have to set a border-bottom on all the cells in the same row, otherwise Chrome doesn't know what to do with the unaccounted space.
It was suggested that I simply use a white border to make it appear as though the other cells do not have a border. But what if I have a gradient background, and don't want a white line to appear?
It appears that 1px solid transparent does not have any affect. rgba doesn't work either.
According to MDN it all boils down to the border-collapse property:
The separated model is the traditional HTML table border model.
Adjacent cells each have their own distinct borders. The distance
between them given by the border-spacing property.
In the collapsed border model, adjacent table cells share borders. In
that model, the border-style value of inset behaves like groove, and
outset behaves like ridge.
Change border-collapse to separate and it works fine: jsFiddle example
I believe that this is either a bug or a different interpretation of the border-collapse property in Chrome. It seems to work fine (as intended) if you remove border-collapse: collapse from <table>: http://jsfiddle.net/YZBXn/6/
An alternative would be to use another element contained in the table cell that has the border.
<td><div style="border-bottom:1px solid black;width:1.5in;"> </div></td>
http://jsfiddle.net/YZBXn/7/
The problem is that 1px solid transparent is transparent to the 'border' underneath that is stretched from the previous sibling <td>. A better way would be to not use a table.
I was able to get it to work without resorting to transparent.
<table>
<tr><td id=cell1>bleah</td><td id=cell2>bleah</td></tr>
<tr><td id=cell3>blah</td><td id=cell4>blah</td></tr>
</table>
#cell1 {
border-bottom: 1px solid black;
}
#cell4 {
border-bottom: 9px dotted red;
}
I have tried everything I can think of in css in order to get a background color to span an entire table row (<tr> tag) But I keep getting a white border around each cell.
CSS (excerpt):
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;}
HTML (excerpt):
<tr class="rowhighlight"><td>A</td><td>B</td><td>C</td></tr>
It just does not want to cooperate. Thanks for helping...
table{border-collapse:collapse;}
I prefer to use border-spacing as it allows more flexibility. For instance, you could do
table {
border-spacing: 0 2px;
}
Which would only collapse the vertical borders and leave the horizontal ones in tact, which is what it sounds like the OP was actually looking for.
Note that border-spacing: 0 is not the same as border-collapse: collapse. You will need to use the latter if you want to add your own border to a tr as seen here.
Try this:
.rowhighlight > td { background: green;}
Removing the borders should make the background color paint without any gaps between the cells. If you look carefully at this jsFiddle, you should see that the light blue color stretches across the row with no white gaps.
If all else fails, try this:
table { border-collapse: collapse; }
tr.rowhighlight td, tr.rowhighlight th{
background-color:#f0f8ff;
}
Firefox and Chrome are different
Chrome ignores the TR's background-color
Example: http://jsfiddle.net/T4NK3R/9SE4p/
<tr style="background-color:#F00">
<td style="background-color:#FFF; border-radius:20px">
</tr>
In FF the TD gets red corners, in Chrome not
Have you tried setting the spacing to zero?
/*alternating row*/
table, tr, td, th {margin:0;border:0;padding:0;spacing:0;}
tr.rowhighlight {background-color:#f0f8ff;margin:0;border:0;padding:0;spacing:0;}
This worked for me, even within a div:
div.cntrblk tr:hover td {
line-height: 150%;
background-color: rgb(255,0,0);
font-weight: bold;
font-size: 150%;
border: 0;
}
It selected the entire row, but I'd like it to not do the header, haven't looked at that yet. It also partially fixed the fonts that wouldn't scale-up with the hover??? Apparently you to have apply settings to the cell not the row, but select all the component cells with the tr:hover. On to tracking down the in-consistent font scaling problem. Sweet that CSS will do this.