I want to remove the following border but I do not know how to do it.
How would I be able accomplish to remove this using CSS? Please help me out, it's very much appriciated!
My HTML and CSS below:
table {
width:100%;
font-size:14px;
}
table, th, td {
border: 1px solid #00b0f0;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table tr:nth-child(even) {
background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
background-color:#fff;
}
table th {
background-color:#00b0f0;
color: white;
}
<table>
<tr>
<th>IP</th>
<th>Datum</th>
</tr>
<tr>
<td>::1</td>
<td>8-5-2016
</td>
<td>
<a href="index.php?page=bruteforce&action=verwijderitem&id=1">
<img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
</a>
</td>
</tr>
</table>
You need to remove the border from the left side of the last div and right side of the previous div.
So I have added two classes .no-left-border and .no-right-border and applied them to the applicable td tags.
table {
width: 100%;
font-size: 14px;
}
table,
th,
td {
border: 1px solid #00b0f0;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
table tr:nth-child(even) {
background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
background-color: #fff;
}
table th {
background-color: #00b0f0;
color: white;
}
.no-border-right {
border-right: none;
}
.no-border-left {
border-left: none;
}
<table>
<tr>
<th>IP</th>
<th>Datum</th>
</tr>
<tr>
<td>::1</td>
<td class="no-border-right">8-5-2016</td>
<td class="no-border-left">
<a href="index.php?page=bruteforce&action=verwijderitem&id=1">
<img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
</a>
</td>
</tr>
</table>
Remove the left border from the last TD :nth-last-child(1){
Remove the right border from the penultimate TD :nth-last-child(2){
table {
width:100%;
font-size:14px;
}
table, th, td {
border: 1px solid #00b0f0;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table tr:nth-child(even) {
background-color: rgba(0, 176, 240, 0.1);
}
table tr:nth-child(odd) {
background-color:#fff;
}
table th {
background-color:#00b0f0;
color: white;
}
table tr td:nth-last-child(1){ /* LAST TD */
border-left: none;
}
table tr td:nth-last-child(2){ /* PENULTIMATE TD */
border-right: none;
}
<table>
<tr>
<th>IP</th>
<th>Datum</th>
</tr>
<tr>
<td>::1</td>
<td>8-5-2016
</td>
<td>
<a href="index.php?page=bruteforce&action=verwijderitem&id=1">
<img src="assets/images/icons/2.gif" class="iconbtn" alt="Verwijder" title="Verwijder" />
</a>
</td>
</tr>
</table>
Due to border collapse, even if you see 1px border there's actually two overlapping borders, so you have to remove both borders accordingly to achieve the needed result (no border).
Working code & preview
<html>
<head>
<style>
body,th,td
{
font-family:Arial,Helvitica,Sans;
font-size:13px;
}
table
{ border-spacing:0; }
th
{
background:#00b0f0;
color:#FFF;
border: 1px solid #00b0f0;
padding:0.4em;
text-align:left;
}
td
{
min-width:70px;
background:#e6f7fe;
border: 1px solid #00b0f0;
padding:0.8em;
}
.blank
{
background:none;
border:none;
}
.no-line-l
{ border-left:none; }
.no-line-r
{ border-right:none; }
.the-x
{
font-weight:bold;
text-align:right;
color:#A00;
}
</style>
</head>
<body>
<table>
<tr>
<th>IP</th>
<th>Datum</th>
<th class="blank"></th>
</tr>
<tr>
<td class="no-line-r">::1</td>
<td class="no-line-r">8-5-2016</td>
<td class="no-line-l the-x">X</td>
</tr>
</table>
</body>
</html>
Preview
Related
I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/
body {
font-family: sans-serif;
}
#table {
border-spacing: 0.3em;
}
#table td {
border: 2px solid #30c;
border-radius: 0.4em;
padding: 1em;
text-align: center;
}
Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body {
font-family: sans-serif;
}
#table {
border-collapse: collapse;
border-spacing: 0.3em;
}
#table tr {
border: 2px solid blue;
}
#table td {
padding: 1em;
text-align: center;
}
<table id="table">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.
Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.
body {
font-family: sans-serif;
}
#table td {
padding: 1em;
text-align: center;
}
#table tr:first-of-type td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#table tr:last-of-type td {
border-bottom: 2px solid blue;
}
#table tr:first-child td:first-child {
border-left: 2px solid blue;
border-top-left-radius: 10px;
}
#table tr:first-child td:last-child {
border-right: 2px solid blue;
border-top-right-radius: 10px;
}
#table tr:last-child td:first-child {
border-left: 2px solid blue;
border-bottom-left-radius: 10px;
}
#table tr:last-child td:last-child {
border-right: 2px solid blue;
border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Again, this is not ideal.
The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:
.row {
font-family: sans-serif;
border: 2px solid blue;
border-radius: 10px;
}
.row div {
display: inline-block;
text-align: center;
padding: 1em;
width: calc(100% / 3 - (3px + 2em));
}
.row:first-of-type {
margin-bottom: 20px;
}
<div class="row">
<div>this</div>
<div>is</div>
<div>a table</div>
</div>
<div class="row">
<div>with</div>
<div>rounded</div>
<div>cells</div>
</div>
I am rewriting existing servlet to make it look better. The tables are very complex and I thought it would look nicer if there is no border between two cells. I failed to define such CSS rule. Then I tried to change cell border color. I have failed again. There are probably some CSS rule priority issues that I cannot handle.
This is what I get on current Chrome and what I want to achieve:
Minimum reproducible code is there: http://jsbin.com/rokabaliti
<html>
<head><style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border-left: none; }
</style></head>
<body>
<table class='rule'>
<tr class="all"><td>XX</td></tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td></tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
</body>
</html>
Setting border on td makes border all around on td and border-collapse: collapse; just overlap two borders it doesn't remove border, so you need to remove border of both columns.
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
Layout 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border:1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Layout 2
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other td:first-child{
border-right:0;
}
.other td:last-child{
border-left:0;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
The border-collapse CSS property determines whether a table's borders
are separated or collapsed. In the separated model, adjacent cells
each have their own distinct borders. In the collapsed model, adjacent
table cells share borders.
MDN
Yo can try,
table { border-collapse: collapse;}
table, th, td { border-left: 1px solid black; border-bottom: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.all td { border: 1px solid black; }
tr.other { background-color: beige; }
td.chain { border: 1px solid red; }
td.target { border: 1px solid red; }
Variant #1: https://jsfiddle.net/a7p2dp3o/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-left: 0px; }
td.target { border-left: 0px; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Variant #2: https://jsfiddle.net/3u2cno6f/1/
<style>
table { border-collapse: collapse;}
table, th, td { border: 1px solid black;}
th, td {
padding: 5px;
text-align: left; vertical-align: top;
}
tr.all { background-color: palegreen; }
tr.other { background-color: beige; }
td.chain { border-color: red; }
td.target { border-color: red; }
</style>
<table class="rule">
<tbody><tr class="all"><td>XX</td></tr>
<tr class="other">
<td style="border-right: 0px;">YY</td>
<td class="target">ZZ</td></tr>
<tr class="other">
<td style="border-right: 0px;">AA</td>
<td class="chain">BB</td>
</tr>
</tbody>
</table>
Expected result 1
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
td.chain {
border: 1px solid red;
}
td.target {
}
.other>td:first-child{
border-right: 1px solid red;
}
.other>td:last-child{
border: 1px solid red;
}
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
Expected result 2
<table class='rule'>
<tr class="all">
<td>XX</td>
</tr>
<tr class="other">
<td>YY</td>
<td class='target'>ZZ</td>
</tr>
<tr class="other">
<td>AA</td>
<td class='chain'>BB</td>
</tr>
</table>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
}
th,
td {
padding: 5px;
text-align: left;
vertical-align: top;
}
tr.all {
background-color: palegreen;
}
tr.other {
background-color: beige;
}
.other>td:not(.target) {
border: none;
}
.target{
border-left:none;
border-bottom:none;
}
I have a table in which I have to separate a row using border as in image below.
As you can see, Border separator is having a space left-right side and not fully touched to table border.
I tried giving padding,margin but nothing worked.
tr {
border-bottom: 1px solid blue;
padding: 10px; // not working
margin: 10px; // not working
}
https://jsfiddle.net/alpeshprajapati/s934Lpbx/
What is the way to achieve this?
CSS
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
float: left;
border-bottom: 1px solid blue;
width: 90%;
margin: 0 10px;
}
td{
width: 32%;
float: left;
}
Try this:
table {
border: 1px solid black;
border-collapse: collapse;
}
thead {
background: black;
color: white;
}
th {
width: 100px;
}
tr {
// border-bottom: 1px solid blue;
}
td{
padding:5px 10px;
}
.border{
background:skyblue;
width:100%;
height:2px;
}
<table>
<thead>
<th>Th1</th>
<th>Th2</th>
<th>Th3</th>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
<tr>
<td colspan="3">
<div class="border"></div>
</td>
</tr>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
</tr>
</tbody>
</table>
To increase the length of the border you have to increase the width of the div that is containing it.
body {
background-color: grey;
}
table {
width: 100%;
}
th, td, tr {
border-collapse: collapse;
}
th {
border: 3px solid black;
background-color: #F2F2F2
}
td {
border: 1px solid black;
}
tr:nth-child(odd) {
background-color: #ff0000
color: black
}
tr:nth-child(odd) {
background-color: #00ffff
color: white
}
I've tried a hundred ways of rewriting this but I can't for the life of me get the 'nth-child' bits to work. I'm simply trying to alternate the table row colors. Any help in advance is appreciated.
You need to put the backgrounds on the columns, not the rows.
tr:nth-child(odd) td {}
tr:nth-child(even) td {}
Will be sufficient to achieve what you want.
Here's a jsFiddle achieving what you want
CSS
<style type="text/css">
body {
background-color: grey;
}
table {
width: 100%;
}
th, td, tr {
border-collapse: collapse;
}
th {
border: 3px solid black;
background-color: #F2F2F2;
}
td {
border: 1px solid black;
}
tr:nth-child(odd) td {
background-color: #ff0000;
color: black;
}
tr:nth-child(even) td {
background-color: #00ffff;
color: white;
}
</style>
EG: HTML
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th> Head 1</th>
<th> Head 2</th>
</tr>
<tr>
<td> Content 1.1</th>
<td> Content 1.2</td>
</tr>
<tr>
<td> Content 2.1</th>
<td> Content 3.2</td>
</tr>
<tr>
<td> Content 3.1</th>
<td> Content 3.2</td>
</tr>
<tr>
<td> Content 4.1</th>
<td> Content 4.2</td>
</tr>
</table>
Result
You need to use it.
<style type="text/css">
tr:nth-child(odd) td {
background-color: #ff0000;
color: black;
}
tr:nth-child(even) td {
background-color: #00ffff;
color: white;
}
</style>
I need your help.
Whenever the user scrolls down the table, both the top and bottom borders of the table header disappear. Once the user reaches the bottom of the table,
the top and bottom borders of the table header re-appear. How do you fix this? I am using IE7 and need the code to compliant to that particular browser.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 10px 10px;
border-top:1px solid #ccc;
_border-bottom:1px solid #ccc;
border-right: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
padding:10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background: #fafafa;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#container {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
border-left: 1px solid #ccc;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position:fixed;
position: relative;
}
table thead tr {
position: relative;
top: expression(this.offsetParent.scrollTop);
}
table tr:first-child td {
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
After playing around with some of the css with a new set of eyes the next day, the following works for IE7:
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
padding:10px;
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#container {
width: 800px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
position:fixed;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
position:relative;
}
table tr:first-child td {
border-top: 0;
}
</style>
Hai I just modified your CSS code right below please try this.
table thead {
position:fixed;
}
table thead tr {
position: relative;
}