In another post I read that if I need to add borders to every row except the header row I should use THEAD & TBODY. So I have added it to the page, but I cannot find how to apply it to the TBODY. I am a newbie so bear with me. I can put borders around the entire table, but need to exclude the header row. Here is a copy of a table with the border attributes in the TABLE tag where it works fine.
<table width="300" BORDER=1 CELLPADDING=3 CELLSPACING=1 RULES=ROWS FRAME=BOX>
<thead>
<tr>
<th width="60" align="center" valign="top" scope="col">Type</th>
<th width="200" align="left" valign="top" scope="col">Address</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" valign="top">Shipping</td>
<td align="left" valign="top">123 Main St</td>
</tr>
</tbody>
</table>
Any help is appreciated.
You should use CSS for presentation/styling:
tbody {
border: 1px solid #ccc;
}
JS Fiddle demo.
I'm not sure how new you are, but for completeness:
<head>
<!-- other stuff -->
<style type="text/css">
tbody {
border: 1px solid #ccc;
}
</style>
<!-- other stuff -->
</head>
You could also use inline styles in the element's opening tag, for example:
<tbody style="border: 1px solid #ccc;">
Preferably, though, you'd link to an external stylesheet, this goes into the head of the document:
<link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />
Or, if you're targeting those browsers that don't offer the option to style the tbody with a border, you can target specific cells within the tbody using the following:
table {
margin: 0;
border-spacing: 0;
}
tbody tr td:first-child {
border-left: 2px solid #000;
}
tbody tr td:last-child {
border-right: 2px solid #000;
}
tbody tr:first-child td {
border-top: 2px solid #000;
}
tbody tr:last-child td {
border-bottom: 2px solid #000;
}
JS Fiddle demo.
This does, of course, require a browser that understands and implements the :last-child and :first-child pseudo-classes.
Related
I am taking an online course and learning javascript, html5 and CSS. I am having an issue with getting my table to be formatted with my css file. It is inside a DIV tag:
<div data-role="main" class="ui-content">
I am trying to do with my CSS:
table th, td { border: 1px solid black;}
And I tried doing .ui-content table th, td {} and nothing and I tried a few others, but I am still stuck with it. Any help would be greatly appreciated. Thanks
When have space between element you are targeting children of that element while when you have commas you are targeting multiple elements.
In your case to be able to apply a border to the th, td and table you would need to do:
table, th, td { border: 1px solid black;}
But if you want to apply the css to the th and td inside of a table element you would need to do
table td { border: 1px solid black;}
table th { border: 1px solid black;}
With the html you have
<div data-role="main" class="ui-content">
<table>
<tr>
<th>Grade</th>
<th>Numeric Equivalent</th>
<th>Explanation</th>
</tr>
<tr>
<td>A</td>
<td>95-100</td>
<td><strong>Excellent.</strong></td>
</tr>
</table>
</div>
Your css should be
table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }
Here's vary basic sample, now may be tell what's the problem
table, th, td { border: 1px solid black;}
<table>
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
</table>
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
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.
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.