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.
Related
I have a div with table inside. Div should be scrollable in case if table gets large.
I try to make something like an active row in a table. If user clicks on a row, the row gets outlined.
The problem is that for the first row of the table the top edge of outline is not shown, and for the other rows the left edge of the outline is not shown.
Why does this happen and how to overcome it?
$('tr').click(function(){
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline{
outline: 1px solid red;
}
table {
border: 1px solid #dfdfdf;
border-collapse: collapse;
}
td {
border-bottom: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="">
<tr class="row-outline">
<td>1.1</td><td>1.2</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td>
</tr>
<tr >
<td>3.1</td><td>3.2</td>
</tr>
</table>
</div>
Instead of outline try border. Check below update.
$('tr').click(function() {
$('tr').removeClass('row-outline');
$(this).addClass('row-outline');
});
.row-outline {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: auto; height: 50px;">
<table style="border: 1px solid black; border-collapse: collapse;">
<tr class="row-outline">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
</div>
The problem lies withing border-collapse
if you remove this tag the "row" gets its border properly but on the other hand the "table" border is still displayed at top and bottom so this might not be a very confincing solution
if you on the other hand simulate the table with divs you could deal with it more easily i guess:
Read more about it here:
How create table only using <div> tag and Css
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 am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I am having a weird issue regarding to my table. I want to add border to my rows so the user can tell
the difference between each rows..
My html
<table>
<tr class='rows'>
<td class='test'> test1</td>
<td class='test'> test2</td>
<td class='test'> test3</td>
</tr>
<tr class='rows'>
<td class='test'> test8</td>
<td class='test'> test9</td>
<td class='test'> test7</td>
</tr>
<tr class='rows'>
<td class='test'> test4</td>
<td class='test'> test5</td>
<td class='test'> test6</td>
</tr>
more...
</table>
my table css
table{
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
.rows{
border: solid 5px red; //this border properties doesn't work.
background-color:grey; //this would change the background colors
}
I couldn't figure out what went wrong in my codes. Can anyone help me about it? Thanks a lot!
Borders can't be applied to table-rows unless you change the display property. The recommended solution is to set borders on table-cells:
table {
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
If you need space between table-cells you can use padding.
just remove the
display:table;
in your css..
Look at this jsfiddle...
I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my CSS?
table#event_calendar tr {
border:1px solid red;
}
<div class="content-body">
<table id="event_calendar">
<tr class="calendarHeader">
<th><div class="calendarMonthLinks"><<</div></th>
<th colspan="5"><h1>April 2009</h1></th>
<th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">>></a></div></th>
</tr>
<tr>
<td class="calendarDayHeading">Sunday</td>
<td class="calendarDayHeading">Monday</td>
<td class="calendarDayHeading">Tuesday</td>
<td class="calendarDayHeading">Wednesday</td>
<td class="calendarDayHeading">Thursday</td>
<td class="calendarDayHeading">Friday</td>
<td class="calendarDayHeading">Saturday</td>
</tr>
</table>
</div>
IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)
table#event_calendar {
border-collapse: collapse;
border-right: 1px solid red;
border-left: 1px solid red;
}
table#event_calendar td, table#event_calendar th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:
table#event_calendar {
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-collapse:collapse;
}
table#event_calendar td, table#event_calendar th {
border-bottom:1px solid red;
}
Setting the border on the td is the easiest solution. But if you really really want to make the borders on <tr>, you can always set:
tr { display:block; border-bottom:1px dotted #F00; }
By doing this, you loose the common width between the <td>. If you want to make all of them equal on width, set the display for <td> to inline-block and set some width:
td { display:inline-block; width:20%; }
It helps when you want to draw some border on the <td> and on <tr>.
CSS generated content like tr:before{} or tr:after{} can always help as well.
Change your CSS selector to "table#event_calendar tr td" and it should work.