I'm trying to create a table with a 1px black border.
I have to nest a table in the main table, and get "thick" borders where the next table butts against its enclosing <td>. I just want a 1px border everywhere.
I have this, in effect:
table.outer{border:1px black solid; border-collapse: collapse;}
td{border:1px black solid; border-collapse: collapse;}
table.nexted{border:1px black solid; border-collapse: collapse;}
If I understand you correctly, you can use border-left, border-right, border-top and border-bottom to create these "special" cases you want.
For instance, in your nested tables you can set
border-left:0;
to get a "resulting" 1 px border in the left side of the nested table.
give no border style for your nested table
<!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">
<head>
<title></title>
<style type="text/css">
table.outer
{
border: 1px black solid;
border-collapse: collapse;
width: 100%;
}
table.outer td
{
border: 1px black solid;
border-collapse: collapse;
}
table.nested, table.nested td
{
border-width: 0px;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table class="outer">
<tr>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
content
</td>
</tr>
<tr>
<td>
content
</td>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Just put the border attribute on the tds. If you want a 1px border throughout, that'll do it; you don't need it on the tables.
this page describes how to do it pretty well: http://www.visakopu.net/misc/table-border-css/
What's happening is that the borders on the cells are bumping up against each other, causing it to appear that there are thicker borders than there actually are. Instead of using the border-collapse property, you set a border on the table itself, and only on, say, the top and left sides, and you set borders on the lower and right sides for the cells.
Related
How can I make the table cell border to be the same width even if I set that border twice? In the examples below you can zoom in and out from the code snippet and see that borders have different width because one was set twice and other just once. Is there a way to make the width to be the same?
table {
border-collapse: collapse;
}
td {
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
<table>
<thead>
<tr>
<th>
123
</th>
<th>
123
</th>
<th>
123
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
Answer
The code you wrote is correct, I'm afraid the problem is the zoom of the web page set differently from 100%. It happened to me couple times and I managed to fix that doing this:
From the browser, try to reset the zoom of the web page to 100%
Let me know how it goes :)
just follow this code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style = "width:50%">
<tr>
<td>66,120</td>
<td>36,600</td>
</tr>
<tr>
<td>26,179</td>
<td>91,641</td>
</tr>
</table>
</body>
</html>
Here's what I want to do (simplified example):
<table>
<tr>
<td style = "border:2px solid green">stuff1 </td>
<td style = "border:2px solid green">stuff2 </td>
<td style = "border:2px solid green">stuff3 </td>
</tr>
<tr>
<td style = "border:1px solid red">stuff4 </td>
<td style = "border:1px solid red">stuff5 </td>
<td style = "border:1px solid red">stuff6</td>
This gives precisely the right result, one row bordered in green, the next in red, but I'd like to get rid of all those "style" statements.
I tried several ways to cascade css for this, but couldn't figure out one that would work. The closest I got was:
<head>
<style>
.test {
font-size: 15px;
}
.test td {
border: 2px solid green
}
.test td a{
border: 1px solid red
}
</style>
</head>
<body>
<table class = "test">
<tr>
<td>stuff1 </td>
<td>stuff2 </td>
<td>stuff3 </td>
</tr>
<tr>
<td><a>stuff4</a> </td>
<td><a>stuff5</a> </td>
<td><a>stuff6</a> </td>
</tr>
</table>
</body>
This almost worked. The top row was bordered in green. But the bottom row was bordered in both red and green.
Could someone explain to me how to set up my css so that I can get the result I want.
**************Well, I found a solution using .test th { for the second color. But this does not solve anything if I want a third color.
You can just add a class to the second set of tds. See below for the code or check the Codepen for a working example.
<html>
<head>
<style>
.test {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border: 1px solid red;
}
</style>
</head>
<body>
<table class="test">
<tr>
<td>stuff1</td>
<td>stuff2</td>
<td>stuff3</td>
</tr>
<tr>
<td class="red">stuff4</td>
<td class="red">stuff5</td>
<td class="red">stuff6</td>
</tr>
</table>
</body>
</html>
Codepen: https://codepen.io/anon/pen/NzygNV
you can do like this as well, Like keeping css classes in a separate css file and then just adding a link tag pointing towards the css file in the html where you have your table.Refer link below for same.
.tbl {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border:1px solid red;
}
<html>
<head>
<!-- you can ad link to css here -->
</head>
<body>
<table class="tbl">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td class="red">data1</td>
<td class="red">data2</td>
<td class="red">data3</td>
</tr>
</table>
</body>
</html>
https://codepen.io/anon/pen/PaQJNK
There aren't any attributes like CellPadding or CellSpacing that will accomplish this for me and when I try to add css to the grid tr's to change the top and bottom margins, they are ignored. How do I add a little bit of spacing between each generated row from the gridview?
Margin doesn't work on table elements, use padding, or like in below sample, set a top and/or bottom border on your tr
table {
border-collapse: collapse;
}
td {
background: gray;
}
tr {
border: 0px solid white;
border-width: 10px 0;
}
<table>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
</table>
You can also achieve this using
border-collapse: separate;
border-spacing: 0 10px;
Snippet
table.grey-theme {
border-collapse: separate;
border-spacing: 0 10px;
margin: 50px;
}
table.grey-theme td {
border: solid #777 1px;
padding: 5px;
}
<table class="grey-theme">
<tr>
<td>Dogs</td>
<td>10</td>
</tr>
<tr>
<td>Cats</td>
<td>20</td>
</tr>
<tr>
<td>Parrots</td>
<td>30</td>
</tr>
</table>
Use it in asp:GridView like
<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">
I have got a table here that Im trying to apply some CSS rules to it.I have got a CSS rule in place to set the border bottom and border top to be in red and green respectively. For some reason border-bottom is not appearing for all TDs but only for the TDs of last TR. Any reason why.
table{
border-collapse:collapse;
}
table td{
border-top:solid 4px green;
border-bottom:solid 2px red;
}
<table width="500px">
<tr>
<td>Computers</td>
<td>£900</td>
</tr>
<tr>
<td>Laptops</td>
<td>£600</td>
</tr>
<tr>
<td>Keyboards</td>
<td>£20</td>
</tr>
<tr>
<td>Hard Drives</td>
<td>£80</td>
</tr>
</table>
The borders are over lapping, the green is on top of the red. To rectify this set border-collapse: separate; instead of border-collapse: collapse;
I am trying to create a hierarchical display of nested tables, where each sub level is indented further from the parent. I'm open to using table or div. The closest I've come is below. It looks mostly correct in IE (except that the borders on the right are mashed together). In Chrome the sub item border is extending beyond the parent on the right.
I'm open to using divs as well.
<html>
<head>
<style type="text/css">
.ItemTable
{
width: 100%;
margin-left: 20px;
border: solid 1px #dbdce3;
}
</style>
</head>
<body>
<table class="ItemTable">
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>Item 1A</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
Looks like a couple of things. Your sub table was missing it's close tag and i added padding to the TD to help with the indent:
<style type="text/css">
.ItemTable
{
width: 100%;
border: solid 1px #dbdce3;
}
.ItemTable td
{
width: auto;
padding-left: 20px;
border: solid 1px #dbdce3;
}
</style>
<table class="ItemTable">
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
Item 1A
</td>
</tr>
</table>
</td>
</tr>
</table>
Tested it in Chrome, FF, IE6, IE7 and Safari and it looks like it works.
Do you plan on displaying tabular data? If not you would be better just using div's for this and just applying a margin to the child element like shown below
<style>
#container {border:1px solid #999}
.indent {margin-left:50px; border:1px solid #999;}
.item {background:#99cc00;}
</style>
<div id="container">
<span class="item">This is item 1</span>
<div class="indent">
<span class="item">This is item 2</span>
<div class="indent">
<span class="item">This is item 3</span>
</div>
</div>
</div>
Of course it really depends on what you are trying to display.
changing
margin-left: 20px;
to
padding-left: 20px;
works for me on IE7, firefox and chrome (although with chrome I had to un-maximise the window then remaximise it - looks like a rendering bug to me)