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;
}
Related
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.
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
I've been experimenting with advanced selectors and it has been going great until now. I'm trying to align 2 carets below each other in a table. To make it appear like the rows are sortable. But I haven't been able to get it working and I couldn't find any information on this specific issue on google.
If anybody can help me with this or provide information, I'd appreciate it.
HTML:
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>
CSS:
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d7" ' ' "\f0d8";
float:right;
}
JSFIDDLE
http://jsfiddle.net/jk62x5ox/
#table table {
margin-top: 40px;
width: 100%;
border: none;
border-collapse: collapse;
}
#table td {
padding: 0 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#table tr {
background: #dbe5f1;
}
#table td:first-child {
border-left: none;
}
#table td:last-child {
border-right: none;
padding-right: 0;
}
#table tr td:last-child:before {
font-family: FontAwesome;
content: "\f05c";
font-size: 18px;
}
#table tr:first-child td:not(:nth-child(9)):not(:last-child):after {
font-family: FontAwesome;
content: "\f0d8"' '"\f0d7";
float: right;
width: 5px;
line-height: 0.5;
}
<div id="table">
<table>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
<td>Column4</td>
<td>Column5</td>
<td>Column6</td>
<td>Column7</td>
<td>Column8</td>
<td>Column9</td>
<td>Column10</td>
<td></td>
</tr>
</table>
</div>
I need your help.
It seems that my TD cell is not respecting the overflow: hidden in the CSS. I've done everything recommended with the fixed layout of the table as well as specifying the widths of the TH's and TD's
Any ideas?
<!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-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- 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</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></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>
You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues
DEMO