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;
}
Related
I'm stuck with a simple table design as i'm from backend I need a table like this
What I have right now
table {
border-collapse: collapse;
width: 100%;
}
tr {
border: none;
}
.first{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.middle{
width: 60%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.last{
width: 40%;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 10px;
}
<table>
<tr>
<td class="University">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</table>
Please help. I have tried with multiple html table attributes all gone in vain.
Set the thead tr element bottom border, and the right border of the .first element:
table {
border-collapse: collapse;
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid #ddd;
}
td {
padding: 10px;
font-family: Quasimoda;
font-size: 0.75em;
color: #1D1D1E;
}
.first {
border-right: 1px solid #ddd;
}
.middle {
width: 100%;
}
<table>
<thead>
<tr>
<th colspan="3">Unique values:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">870</td>
</tr>
<tr>
<td class="first">January</td>
<td class="middle ">the progress bar will be placed here </td>
<td class="last">560</td>
</tr>
</tbody>
</table>
Actually, your picture is not that clear.
I was not clear where you want border actually.
But I try to do this, Run the code snippet and have a look, and let me know if this works for you or not.
.colspan2border
{
border-collapse: collapse;
border-bottom: 1px solid red;
}
.rightBorder
{
border-collapse: collapse;
border-right: 1px solid red;
}
.pr-left1
{
padding-left: 1rem;
}
table
{
border-collapse: collapse;
}
tr
{
border: none;
}
<table>
<tr colspan="2" class='colspan2border'><td>Unique values:</td></tr>
<tr>
<td class="rightBorder pr-left1">University</td>
<td>870</td>
</tr>
<tr>
<td class="rightBorder pr-left1">Custom</td>
<td>560</td>
</tr>
</table>
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.
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
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;
}