I have used the css property border-collapse: collapse, but it seems not to be working.
Here is the html
<table cellspacing="0">
<tr>
<td>This is demo</td>
<td>This is demo</td>
</tr>
<tr>
<td>This is demo</td>
<td>This is demo</td>
</tr>
<tr>
<td>This is demo</td>
<td>This is demo</td>
</tr>
</table>
And the CSS
table tr td {
border: 2px solid red;
border-collapse:collapse;
}
You need to apply the property on the table, not on the td,
table {
border-collapse:collapse;
}
table tr td {
border: 2px solid red;
}
Related
My HTML:
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
My CSS:
table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;
}
th, td {
padding:15px;
}
th {
text-align:left;
border-collapse:collapse;
}
I want to collapse the borders of the TH only, but it's not working. Border collapse and border spacing aren't working when i target only the TH. I can change the background color and the padding and do other changes to TH only, but border changes seems to not work. Why is that?
Note: Before you tell me how it can be done using other ways, please tell me why THIS way isn't working.
Because border-collapse is a style rule of the table and not of the single cells (td or th). This means that you set it on the table element and all the borders in the table will collapse or separate.
You can mimic the behavior of border-collapse: separate only in td by doing something "hacky" like inserting a div inside tds. Check out the fiddle below:
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
padding: 2px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
td > div {
height: 100%;
width: 100%;
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Cell 1</div></td>
<td><div>cell 2</div></td>
</tr>
<tr>
<td><div>Cell 3</div></td>
<td><div>Cell 4</div></td>
</tr>
</tbody>
</table>
as everybody told you , border-collapse is a rule set for the whole table, it tells how cells should be printed at screen side by sides.
A work around could be to fake borders with a box-shadow.
inside tds :
table {
border-collapse: collapse;
}
th {
border: solid 2px;
box-shadow: inset 0 -2px;
}
td {
border: solid transparent;
box-shadow: inset 0 0 0 2px;
padding:3px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
outside th
thead {
padding-bottom: 2px;
}
th {
border: 0;
box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
padding: 2px;
}
td {
border: solid 2px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
The border-collapse property can only be applied to <table> elements - not individual rows or cells
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching.
body {
background: #000;
}
#wrap {
margin: 0 auto;
/* margin 0 auto will center that box in your document */
width: 780px;
/*size of your box*/
background: #000;
text-align: center;
/* everything will be written in that box will be centered horizontaly*/
}
td:hover {
background-color: #ff0000;
color: #000000;
}
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
Try using nth-child on the elements, here is a quick reference to all kinds of selections.
td:nth-child(odd) {
color: green;
}
td:nth-child(even) {
color: red;
}
td {
border: 1px solid gray;
}
<table>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$52.95/Month</td>
<td>$31.95/Month</td>
<td>$25.95/Month</td>
</tr>
</table>
You can use nth-child css psuedoselectors:
td:nth-child(1) {
color: yellow;
background-color: #AAA;
}
td:nth-child(2) {
color: red;
}
td:nth-child(3) {
color: blue;
}
<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>
First let's create a simplify version of your table.
table tr td{
border:2px solid black;
width:70px;height:30px;
text-align: center;
}
table{
border-collapse: collapse;
}
table:hover tr td:nth-child(1){
background: yellow;
}
table:hover tr td:nth-child(2){
background:blue;
}
table:hover tr td:nth-child(3){
background:red;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
<tr>
<td>nine</td>
<td>ten</td>
<td>eleven</td>
<td>twelve</td>
</tr>
</table>
Let me give you a bit of an explanation.. the table:hover tr td:nth-child(1) part, first the table:hover part, when we hover to the whole table, we want to target all the tr, inside the table, then inside the tr, we want to only select the first td ":nth-child(1)" of every tr, so this will only select and change the background color of the one,five and nine td (which is the first column of the table) color to yellow if we hover the mouse to the whole body of the table.
PS: For me, I prepare to do this on JavaScript.
I need to create an invoice with HTML table, td, tr.
I need something like this
that every item in the invoice is in a new row, but a row without border.
I have tried to add a class for tr element
border: 0px solid black;
but it is not working properly. Can you advise please?
In this snippet is created a table, but there are borders everywhere
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
Use Border style in CSS like below to remove Border of <tr> <td> in Table.
border-right:none;
border-left:none;
border-bottom:none;
border-top:none
Is it solved ?
Set border for table but for cells you have to specify a custom class to each cell according to its position. I suggest 4 kinds of borders on top, right,bootm and left. Also do not forget to set border-collapse for table to collapse TD borders on each others:
table {
border:1px solid #000000;
border-collapse:collapse;
}
td{
padding:10px;
}
.tB{
border-top:1px solid #000000
}
.rB{
border-right:1px solid #000000
}
.bB{
border-bottom:1px solid #000000
}
.lB{
border-left:1px solid #000000
}
<table>
<tr>
<td class="rB">test</td>
<td class="bB">test</td>
</tr>
<tr>
<td class="rB bB">test</td>
<td class="bB">test</td>
</tr>
</table>
You can use a specific class with style property border:0 to remove the borders form individual row.
Find the solution (on top of your snippet) below:-
tr.noBorder td {
border: 0;
}
tr.noBorder td:first-child {
border-right: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr class="noBorder">
<td>January</td>
<td>$100</td>
</tr>
<tr class="noBorder">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
I am developing a report in HTML. There I have a table. In each TD I have another table. I want to separate each table within td. So I have enabled the border of the main table. But few of the internal table need to display the cell borders. But I don't want the outer border of that particular internal table to display.
Ex.
<table ID="main" >
<tr>
<td>
<table ID="INTER1">
<tr>
<td>Table1 without internal border</td>
<tr>
</table>
</td>
<td>
<table ID="INTER2">
<tr>
<td>Table with internal border</td>
<tr>
</table>
</td>
</tr>
<table>
I want to do this using CSS class. I have googled for it but I found the solution which will apply for all the tags, but that means it will remove outer border of all the tables.
Can I have have the solution for above problem?
Here is how you can do it, you just need to add the n-bordered class to each table where you don't want the outer borders.
.border-none {
border-collapse: collapse;
border: none;
}
.border-none td {
border: 1px solid black;
}
.border-none tr:first-child td {
border-top: none;
}
.border-none tr:last-child td {
border-bottom: none;
}
.border-none tr td:first-child {
border-left: none;
}
.border-none tr td:last-child {
border-right: none;
}
<table class="border-none">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
<tr>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
Not sure what you want, so review this and maybe we can progressively resolve this. According to Mr. Sweeney, you don't want the inner tables' borders but you still want the outer table's border. The dashed black line shows where the 2 inner table borders are. In the code are comments on how to remove them.
table#main { border: 2px dashed blue; border-collapse: collapse; }
td { border: 1px solid red; height: 80px; }
td table { border: 1px dashed black; }
/* Replace the last line with this one */
/* td table { border: none; } */
<table ID="main" >
<tr>
<td>
<table ID="INTER1">
<tr>
<td>Table1 without internal border</td>
<tr>
</table>
</td>
<td>
<table ID="INTER2">
<tr>
<td>Table with internal border</td>
<tr>
</table>
</td>
</tr>
<table>
<ul>
<li>Blue Dashed = Outer Table</li>
<li>Black Dashed = Inner Table</li>
<li>Red Solid = Cell</li>
You can just specify which tables you want to remove the border from. Like so:
td table, td table th, td table td {
border: 0;
}
The above selects every table,th and td within another td. The highest-level table will be unaffected.
To style the each tds of a table differently, use their ids. Then do something like:
#INTER1 td {
border: 0;
}
#INTER2 td {
border: 1px solid black;
}
If you have more td elements and you only want to style one of them, you can do the other approach as per above.
#INTER2 td:nth-of-type(2) {
border: 1px solid black;
}
I have the following sample table:
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>
</table>
And here is the simple CSS code:
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid #000;
}
The weird thing is the bottom border after first th disappeared, here is a screenshot:
When I switch to another window and switch back to IE, the table refresh as normal. For the convenient, I create a jsFiddle: http://jsfiddle.net/hulufei/3dxt2/9/
This effect IE10, 9, 8. Is there a fix for this bug in IE?
Change the style code as this seems solve the problem:
table {
border-collapse: collapse;
border-spacing: 0;
border-top:1px solid #000;
border-left:1px solid #000;
}
th, td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>