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.
Related
I'm doing something like this:
$("#accountsTable")
.append(getHeadersFromJson(json))
.append(getRowsFromJson(json));
$("#accountsTable")
.css("border", "3px solid black");
$("#accountsTable th")
.css("border-bottom", "3px solid black");
$("#accountsTable td")
.css("border-bottom", "1px solid black");
It looks good except I just noticed that the last row has two border-bottom's - one thin for TD and one think for TABLE. I can live with that. However, the perfectionist in me cries a little.
Is there a CSS way to remove the last line style without actually attributing it with a name, id, style etc. during creation?
td:last-child { border: none; }
I think this should do it.
tr:last-of-type td {
border: none;
}
or
$("#accountsTable tr:last-of-type td").css({border:"none"});
Another possible solution is reducing the th border to 2px and then using border-top instead for each td.
Just set the following on your table:
border-collapse: collapse;
You can remove the bottom border from your table:
border-bottom: none
or remove the border for td in the last row:
tr:last-child td{
border-bottom: none;
}
Try the :not selector
https://developer.mozilla.org/en/docs/Web/CSS/:not
td:not(:last-child) {
border: 3px solid black;
}
and if you're worried about browser support, check out http://selectivizr.com/
im building a minesweeper game, and i included a 10*10 table. i programmed it so that when a user clicks a "td", it displays either nothing, or a "b", or a number 1-4. however it also resizes (shrinks) when it does so, how do i prevent it from doing this?
css for table
table{
border-collapse: collapse;
border-spacing: 0px;
border: 4px inset #444;
}
css for td
td {
margin: 0px;
}
css before clicking
.box{
border: 3px outset #959595;
width:25px;
height: 25px;
}
this css is for a bomb ("b"), nothing, and numbers.(the difference with those is color)
.bomb{
border: 1px dotted #000000;
width:25px;
height: 25px;
}
heres a link if that helps
what is the css after clicking?
i think it's resize because of border with diffrent value
Use a developer's tool to very carefully measure out your box-models. You should be using some padding inside the <td> so that the borders do not overwrite or coincide with the table. My suggestion would be to use display:block on possible <td> contents and set the border so that it appears within the actual grid lines of the table.
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.
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.