My pen: http://codepen.io/helloworld/pen/gimoI
I want to have a gray and white border on a table row to achieve a 3d effect.
Why is only one border color visible?
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<table style="width:100%;">
<tr>
<td style="vertical-align:top;width:60px;">Alarm 1</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Helmenstraße 5</span>
<span>90000 Nürnbergxxxxxxxxx</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
<tr>
<td style="width:60px;vertical-align:top;">
<div style="border-radius:28px;border:black solid 1px;background:red;">Alarm 1</div>
</td>
<td style="width:auto;">
<span style="font-weight:bold;">Brand LANG: </span>
<span>Langenburgerwald allee 25/c</span>
<span>70000 Wurmlingen ob der Tauber</span>
</td>
<td style="width:30px;text-align:center;"> <i class="icon-angle-down button"></i></td>
</tr>
</table>
body,html{
padding:0;
margin:10px;
background:#fafafa;
}
table{
border-collapse:collapse;
border-spacing:0;
}
table td
{
padding: 5px;
}
td {
border-bottom: gray solid 2px;
border-top: white solid 2px;
background:green;
}
Because the top border is white and is difficult to see the diference with the background.
I just updated it now:
body,html{
padding:0;
margin:10px;
background:#fcc;
}
table{
border-spacing:0px;
}
table td
{
padding: 5px;
border-bottom: gray solid 2px;
border-top: white solid 2px;
}
tr {
background:green;
}
You have to remove border-collapse:collapse;
Check this [http://codepen.io/anon/pen/vIHcf][1]
You need to work with box shadows . I just also described it in my one of the answer of same type of questio Link to that Answer or you can go through to this link to learn more about box-shadowsStudy box shadow
you can add
-webkit-box-shadow:10px 10px 5px #595959; -moz-box-shadow:10px 10px 5px #595959; -o-box-shadow:10px 10px 5px #595959;
in your td style & then find that is it same as you want ..
Both are visible on my side.
Little alternative or addition to achive 3d effects:
You can use CSS Outline. Its like a second border.
http://www.w3schools.com/css/css_outline.asp
I see the blank and grey border. But if you want to put some 3d effect on the rows why don't use box-shadow?
box-shadow: inset 1px 1px 3px #000;
Here I made an example with your code.
Related
Can someone tell me what is wrong with the following code? Basically I want the table to be styled so it has the border, the BG color and aligned to the top.
Thank you.
<td style="border: solid 2px #111111;" bgcolor="#d9e2f4;" vertical-align:top;">
You have styles outside of the inline style="" declaration.
<td style="border:solid 2px #111111;background:#d9e2f4;vertical-align:top;"></td>
Ideally, the styles should be separated from the HTML. Place them in their own stylesheet.
table td {
border:solid 2px #111111;
background:#d9e2f4;
vertical-align:top;
}
I don't see your whole code but it should be:
<table class="yourClass">
<tr>
<td>....</td>
</tr>
</table>
and the css code should be:
.yourClass{
border: solid 2px #111111;
background-color: #d9e2f4;
vertical-align:top;
}
I was creating a table, but my issue is that table border is not working because it calls some other css.
Here is my FIDDLE
margin: 0;
padding: 0;
border: 0;
So how can i override the margin: 0;padding: 0; border: 0; , so that i can get the table border easily.
Any help is appreciated.
It's not about the margin nor padding, it's the border: 0 that hides the border.
Add a rule for the table tds such as:
td {
border: 1px solid black;
}
to show td borders. The same applies to table tag. You would also probably want to take a look at the border-collapse property for table tag (https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse).
Demo: http://jsfiddle.net/2DQ6U/10/
Furthermore, I suggest you to avoid any inline style definition if not strictly necessary.
Remove border:0 from CSS.
Take a look here:
DEMO
It is better you can use class for the table and apply it through CSS.
HTML
<table class="testclass">
<tbody>
<tr>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>ID Number</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Room Name</strong></span></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;"><strong>Name of Company</strong></span></span></td>
</tr>
<tr>
<td>
<span style="color:#000000;"><strong><span style="font-family:verdana,geneva,sans-serif;">1</span></strong></span></td>
<td>
<span style="color:#000000;"><span style="font-family:verdana,geneva,sans-serif;">Premier</span></span></td>
<td>
Amsh Ltd</td>
</tr>
</tbody>
</table>
CSS
table.testclass
{
border-top:1px solid #000;
border-left:1px solid #000;
border-collapse:collapse;
width:800px;
}
table.testclass td
{
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:5px;
}
FIDDLE DEMO
the reason your border doesnt work is because you are using "border-collapse: collapse" on the tbody. You need to instead use it on table styling.
here is the CSS you need to use
table,td{
border: 1px solid black;
padding: 5px;
margin: 1px;
}
Here is the HTML change. Notice the "border-collapse:collapse" in the table but not tbody which was your problem.
<table border="10" cellpadding="10" cellspacing="10" style="width: 800px;border-collapse: collapse;">
<tbody style="border: 1px solid black; ">
Here is the fiddle
Hope that helps.
please see this example:
http://jsfiddle.net/qTjdX/
I want the red border-bottom to show as 1 solid line, but right now the yellow border is splitting it up in 3. Is there any way to have the border-bottom take precedence? Like a z-index of sorts?
I have tried both border-collapse:collapse and border-collapse:separate.
The only thing that is working is if I make the red line thicker, but I want it to have the same width.
table {
width:100%;
border:1px solid blue;
border-collapse:separate;
}
th, td {
border:1px solid yellow;
padding:5px;
}
th {
background:black;
color:white;
}
th {
border-bottom:1px solid red !important;
}
td {
background:#efefef;
}
The problem you're having is because the border is composed of four separate sides, which meet at 45 degree angles at the corners, which is rounded in various ways. So having a bottom-border a different color to that of the sides will always cause the borders to break.
If you look at this demo:
div {
float: left;
border-width: 25px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
JS Fiddle demo.
You can see how the various borders meet, because a pixel can't be subdivided this leads to the corner-pixels being the same solid colour as one of the sides and therefore a different colour, if the colours are different, to the other side with which it connects.
To compensate the only option you really have is to use a nested element within the th:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
<th><div>col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
With the following CSS:
table {
width:100%;
border:1px solid blue;
border-collapse:collapse;
}
th {
border-bottom: 2px solid yellow;
}
th div, td {
border: 1px solid red;
}
th div {
border-bottom-width: 0;
}
JS Fiddle demo.
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }
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.