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;
}
Related
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.
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 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.
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.