What is the best way to add a border to an html table when I already have a rule in the css
*{border:0;}
If I add style="border:1px;" into the table then I just get a border surrounding the entire table instead of for each cell as well which is what I should have when I use:
<table border="1" cellspacing="0" cellpadding="0">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
Example
You shouldn't use that HTML as it is not valid. use the following CSS:
table {
border: 1px;
border-collapse: collapse;
}
table td, table th {
border: 1px;
padding: 0px;
}
border-collapse on collapse makes the borders of the cells single. That is the equivalent of HTML cellspacing. Make sure you set the border on the table as well as the td and th.
You also need to set borders on cells. Perhaps you should set up a CSS class for this table.
table.bordered
{
border-collapse:collapse;
}
table.bordered > td
{
border: 1px solid black;
}
Then you would use <table class="bordered">
edit: The other answers assume you want this for ALL tables. I see no reason to jump to that conclusion.
Related
Please forgive my all-encompassing ignorance, but I just can't get my table to look right in my webform.
I declare a table:
<table>
</table>
and it has no border. There is an attribute for border, as such:
<table border="1">
</table>
but asp.net tells me that the border attribute is 'obsolete'.
I try to add it in CSS...
.table{ border: 1px solid black; border-collapse: collapse; }
...but this just puts a border around the whole table, not the individual cells.
All I want is a normal looking table with lines around each cell. What is the proper way to do this?
Use this:
table, table th, table td { border: 1px solid black; border-collapse: collapse; }
(need to apply the border to the table-cells too)
The code above won't work as...
.table{ border: 1px solid black; border-collapse: collapse; }
is looking for a class of "table" and not a table element. Either update the table class to "table"...
<table class="table">
...or change your CSS to find the table element itself.
table{ border: 1px solid black; border-collapse: collapse; }
You will also need to style th and td elements to have the border.
Am trying to use CSS3 to set the cell-spacing and the cell-padding for my table since HTML5 doesn't support these attributes.
I have found many resources on the internet says that you should use border-spacing and padding using CSS.
Unfo. i tried all these tricks , but it seems that no thing changing at all. The spacing is very important because am including image structure on the different cell of the table.
So how i can solve it now ? plz need your help
#SearchTable
{
border-collapse: collapse;
padding:0px 0px 0px 0px;
}
#SearchTable td
{
padding:0;
border-spacing:0px 0px;
}
For cellspacing:
Set border-spacing on the table, not on the td.
Set border-collapse to separate.
#SearchTable {
border-collapse: separate;
border-spacing: 8px;
}
You have not set id=SearchTable on the table, or you have some other stylesheet rules that override those that you specify. As such, the rules you posted are more than sufficient for the effect; you only need
#SearchTable
{
border-collapse: collapse;
}
#SearchTable td
{
padding:0;
}
(which are already in CSS2).
You need to set it like this. It worked for me.
#SearchTable {
border-spacing:2px 2px;
border-collapse:separate;
}
#SearchTable td {
border:1px solid black;
}
I have CSS items for all my table elements (<table>, <tr>, etc...) but I have one table for which I don't want the CSS to apply.
What is the quickest way to have this table just display as a raw HTML table and not apply my CSS formatting.
Also, in my CSS file, I have this:
table td
{
padding: 5px;
border: solid 1px #e8eef4;
}
table th
{
padding: 6px 5px;
text-align: left;
background-color: #FFFFFF;
border: solid 1px #e8eef4;
}
what if I want to have multiple table formats, how do I do this?
You should use classes to define several different styles, e.g:
// global table styles - will be applied to all tables
table td
{
background-color: green;
}
// styles for tables with class "style1"
table.style1 td
{
border: solid 1px red;
}
table.style1 th
{
...
}
// styles for tables with class "style2"
table.style2 td
{
border: solid 1px blue;
background-color: white;
}
Then set the class attribute on the tables where you want to apply that style:
<table class="style1"><tr><td> red border, green background </td></tr></table>
<table class="style2"><tr><td> blue border, white background </td></tr></table>
<table><tr><td> default border, green background </table>
Here style1 is applied to TDs of the first table, style2 to TDs of the second table.
Note that global styles (without any class name) apply to all matching elements (e.g. TDs), but these styles can be overridden by specific styles (as shown with the background-color, which is globally set to green, but overridden for style2).
BTW: for a tutorial about CSS, have a look at http://w3schools.com/css/.
Use a class for the table you want formatted. For example
<table class="myformat">
....
</table>
Now on the css side make sure you define the correct formatting as follows:
table.myformat th {
color: red;
}
table.myformat td {
color: green;
}
The tables that have the class="myformat" property will have the formatting. The ones that not will not. With this approach you can further make various table formats as different classes and apply them to your different tables.
I have a table with the following CSS rules applied:
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
I want certain cells to have a red border, instead.
td.special { border: 2px solid Red; }
This doesn't work as I'd expect. In FireFox 3 and IE8 it looks like this:
(source: control-v.net)
In IE7 Compatibility mode (Running in IE8) it looks like this:
(source: control-v.net)
I want all four sides of the <td> to be red. How can I do this? A test case can be found here.
There's another post on the site I read a while ago that gracefully solves this problem, but I couldn't find it. Anyway, the approach was to make the border-style double instead of solid. This works because double has a higher priority than solid. On 1px or 2px borders, the gap between the double lines doesn't appear because the lines overlap.
table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }
<table>
<tr><td>a</td><td>a</td><td>a</td></tr>
<tr><td>a</td><td class="special">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td><td>a</td></tr>
</table>
Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:
<td class="special"><div>Two</div></td>
Then applying a style like this:
.special div {
border: 2px solid #f00;
margin: -2px;
}
What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.
Using pseudo elements:
You can use a pseudo element to achieve this.
Just absolutely position the pseudo element relative to the parent td element. Make the pseudo element fill the entire dimensions of the parent element, and then add the border to it.
Example Here
table {
border-collapse: collapse;
}
table td {
position: relative;
border: 1px solid #000;
padding: 2px;
}
table td.selected:after {
content: '';
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
border: 2px solid red;
}
<table>
<tr>
<td>One</td>
<td>One</td>
<td>One</td>
</tr>
<tr>
<td>Two</td>
<td class="selected">Two</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Three</td>
<td>Three</td>
</tr>
</table>
border-collapse means the td's don't actually have some of their borders. You'll have to find some other way to do it. Giving the table a background and taking away all borders but leaving the td margins gives a nice border. Then setting a border would give an internal border, I believe. Would that work?
Is there any workaround for the following "1 pixel to the left" bug?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>
It looks like this:
Is there any pure CSS solution to this?
Edit
I was bit unclear about my table so here it is again:
With border-collapse:
With cellspacing="0" and without border-collapse as suggested:
So now the borders inside my table are doubled, but I want 1px border across my table.
When I remove 1px border from table I end with:
Borders are still doubled inside my table.
I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?
For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.
table { border-spacing: 0; *border-collapse: collapse; }
This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).
If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.
Remove the border-collapse and use cellspacing=0 instead.
<table style="border: 15px solid green; width: 100%" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
Set your border widths to 10px in your code to see what is really happening.
edit after OP edit
You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;
table {background-color: green;width:100%;}
td, th{background-color:white;}
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #000;
}
We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:
table {
border: solid 1px #000;
border-width: 0 1px 1px 0;
border-spacing: 0;
}
th, td {
border: solid 1px #000;
border-width: 1px 0 0 1px;
}
You see what it's doing? The trick is that we put only a top and left border on the cells:
+------+------
| cell | cell
+------+------
| cell | cell
This leaves the table without a right and bottom edge: we style those onto table
+------+------- | +-------+------+
| cell | cell | | cell | cell |
+------+------- + | = +-------+------+
| cell | cell | | cell | cell |
| | ---------+ +-------+------+
The border-spacing: 0 is essential otherwise these lines will not connect.
Best CSS only solution:
Add
td {
background-clip: padding-box
}
More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
Thanks to #medoingthings
table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */
table { border-spacing: 0; *border-collapse: collapse; }
wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:
table {
border-collapse: separate;
}
table tbody td {
border: 1px solid #000;
border-top: none;
border-left: none;
&:first-child {
border-left: 1px solid #000;
}
}
table thead th {
border-bottom: 1px solid #ff0000;
&:first-child {
border-left: 1px solid #ff0000;
}
&:last-child {
border-right: 1px solid #ff0000;
}
}
I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:
table { border: 1px solid transparent; border-collapse: collapse; }
This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.
I don't think I've ever heard of a "1px to the left bug," you should upload your code someplace so we can check it and make sure it's not an "I missed something somewhere" bug :) I would also suggest running through your markup with Firebug to determine if there is anything else going awry.
I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.
Ran into this issue and as a work around. I used :
table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}
basically cheated the border by using a background color. Which thus prevented double inside borders.
My solution is as follows.
Remove border-collapse, border and border-spacing from CSS.
Add this JavaScript code:
$('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');
To be honest, I don't know why it works. It's jQuery magic.
I also have run into this problem the full proof solution is very simple in your asp:gridview just add
GridLines="None"
and the lines disappear in Firefox no css modification needed.