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...
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
I'm sure this is really simple. How can I force one cell's border style to override the other values around it?
The problem is shown in the image below. I want to force the border of the 'Today' cell to be completely black on all sides, rather than just the bottom and the right:
Here is the example in JSFiddle
css code:
td {
border: 1px solid #ccc;
}
.event {
border: 2px solid gray !important;
}
.today {
border: 2px solid black !important;
}
Table html:
<table class="table">
<tr>
<td>Detail</td>
<td>Detail</td>
<td class="event">Event</td>
<td>Detail</td>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
<td class="event">Event</td>
<td class="today">Today</td>
<td class="event">Event</td>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
<td>Detail</td>
<td class="event">Event</td>
<td>Detail</td>
<td>Detail</td>
</tr>
</table>
The main problem here is the usage of the border-collapse: collapse; style. To solve that you could try one of the following solutions:
Solution 1:
You could try adding a different border style:
.today {
border: 2px double black!important;
}
Here is a fiddle:
https://jsfiddle.net/h1t0ctmx/
Here is a documentation about the border conflict resolution:
https://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution
Solution 2:
Alternatively you could just add the following to your surrounding table:
table {
border-collapse: separate;
}
Here is an updated fiddle:
https://jsfiddle.net/ggckr5mL/
Here is a documentation about the border-collapse property and some examples which explain the behaviour:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
Here is an updated version of the css and html with border-collapse as a fix. Hope it helps
table {
border-collapse: separate;
}
td {
border: 1px solid #ccc;
}
.event {
border: 2px solid gray !important;
}
.today {
border: 2px solid black !important;
}
<table class="table">
<tr>
<td>Detail</td>
<td>Detail</td>
<td class="event">Event</td>
<td>Detail</td>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
<td class="event">Event</td>
<td class="today">Today</td>
<td class="event">Event</td>
<td>Detail</td>
</tr>
<tr>
<td>Detail</td>
<td>Detail</td>
<td class="event">Event</td>
<td>Detail</td>
<td>Detail</td>
</tr>
</table>
As d.h. points out, the main problem is border-collapse: collapsed. If you need to keep that, one tactic I've found to work is to use contrasting inset/outset values for the border-style of the cells.
td {
border: 1px outset gray;
}
td.selected {
border: 1px inset blue;
}
Give me the following result:
If you can use jquery than may be this would help.
Add jquery..
// Add Jquery
$('td:contains("Today")').addClass('today');
//Add css
.today {
border: 1px solid red;
}
jsbin
An even better solution is to be more specific in the CSS you are using. It's not always the neat way to use !important, although it's not wrong. In more complex applications, it can cause problems. If you want to overrule this styling another time, you can only do this by being a bit sloppy (using atleast another !important).
Specific css is stronger than the less specific css.
For instance ".table .today" will overrule ".today".
td {
border: 1px solid #ccc;
}
.table .event {
border: 2px solid gray;
}
.table .today {
border: 2px double black;
}
Seen an example: https://jsfiddle.net/crix/fuy687nb/
Take a look at: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
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.
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.