css:
.item_fact{
border-bottom:#CCCCCC 1px solid;
}
html:
<table>
<tr class="item_fact">
<td> hello </td>
<td> world </td>
</tr>
</table>
IE7 does not display the border-bottom, but Firefox and Chrome does!
How can I hack this css?
the correct css syntax would be:
border-bottom: size style color;
So, in your case:
border-bottom: 1px solid #CCCCCC;
edit: actually, it seems TR doesn't act like it 'contains' the TD elements in IE7. One trick you can do is have the table collapse borders, then apply all TDs under .item_fact to have the border-bottom themselves.
Like this:
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
.item_fact td {
border-bottom:1px solid #CCCCCC;
}
</style>
</head>
<body>
<table>
<tr class="item_fact">
<td> hello </td>
<td> world </td>
</tr>
</table>
</body>
</html>
Borders on rows are not supported in IE/css. You need to border the cells.
.item_fact td {
border-bottom:1px solid #ccc;
}
Related
I want to have some TDs in a table without border. Here is what I've tried:
CSS
.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
.calendar-table td {
border: 1px solid black;
}
HTML
<table class="calendar-table">
<tr>
<td class="calendar-noBorder"> </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td class="calendar-noBorder"> </td>
<td> a </td>
<td> b </td>
<td> c </td>
</tr>
<tr>
<td> aaaaaa</td>
<td> b </td>
<td> c </td>
<td> d </td>
</tr>
</table>
JsFiddle
I want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.
What's the best way to do it clean ?
Your order of applying styles was wrong. The correct order is:
.calendar-table td {
border: 1px solid black;
}
td.calendar-noBorder {
border: none;
background-color: red;
}
.calendar-table {
border-collapse: collapse;
}
Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.
See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"
instead of:
border:none;
Use -
border:0;
on the TD classes
Try
.calendar-noBorder {
border: none!important;
background-color: red;
}
https://jsfiddle.net/bwudg7fn/2/
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 have a following code:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: solid red 2px;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
It works correctly. A property border of "tr" inherit by child "td".
But this code work differently, in spite of fact, that logical of work is the same:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: inherit;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
There is property border of "tr" don't inherit by child "td". Why?
In the final html that is rendered, tr is not child of table but tbody.
Hierarchy is: table -> tbody -> tr
Default border of tbody is not inherit but `medium , therefore, tr doesn't inherit.
Try this:
tbody, tr {
border: inherit;
}
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.
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.