This is a crappy issue and I am truly sorry to ask this. But I have been programming PHP for hours and now trying to display it on a simple html layout. I need more coffee and my eyes are tired, woke up too early...
Anyway the issue is, that for some reason my css styles that should affect the text stylings has no effect what so ever on the layout. Which is a bit odd that the border settings and paddings do work, but font-weight or the background-color does not.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
<style>
html {
}
body {
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
</body>
</html>
Add this code:
table {
border-collapse: collapse;
}
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
See This Also:
table {
border-collapse: collapse;
}
.first_row {
font-weight: bold;
background-color: red;
}
tr:not(.first_row) td:not(:first-child) {
border-left: 1px solid #000;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table>
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
<tr class="second_row">
<td>IP-address2</td>
<td>Last visited2</td>
<td>Rough location2</td>
</tr>
</table>
You can used thead with th for heading of table
table {
border-collapse: collapse;
}
table th {
font-weight: bold;
background: red;
padding:4px;
border-bottom: 1px solid black;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visitor logs</title>
</head>
<body>
<table>
<thead>
<tr>
<th>IP-address</th>
<th>Last visited</th>
<th>Rough location</th>
</tr>
</thead>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Add cellspacing="0" cellpadding="0" in table tag or add table{border-collapse: collapse;} in your css.
.first_row {
font-weight: bold;
background-color: red;
}
td {
padding: 4px 8px 4px 4px;
border-bottom: 1px solid black;
}
<table cellspacing="0" cellpadding="0">
<tr class="first_row">
<td>IP-address</td>
<td>Last visited</td>
<td>Rough location</td>
</tr>
</table>
Related
I have two different tables on separate pages, and I need to specify a certain style to each one. This is my code (It works with separate stylesheets, but I need it to work on one):
Here is a snippet of my tables and the CSS:
body {
font-family: verdana;
}
/* Table 1 css */
.table1,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
/* Table 2 css */
.pcsetup,
th,
td {
color: #030099;
border: 1px solid black;
border-width: 0px 1px 1px 1px;
font-size: 110%;
}
.tc1 {
background-color: white;
border: 2px solid black;
padding: 5px;
}
<h4>table 1</h4>
<table cellpadding="10" cellspacing="0" class="table1">
<caption class="tc1"><strong>My PC Setup</strong></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<td><strong>CPU:</strong></td>
</tr>
<tr>
<td><strong>RAM:</strong></td>
</tr>
</table>
<h4>table 2</h4>
<table cellpadding="10" cellspacing="0" class="pcsetup">
<caption class="tc1"><b>PC Setup</b></caption>
<tr>
<th>Component</th>
</tr>
<tr>
<th><strong>CPU</strong></th>
</tr>
<tr>
<th><strong>RAM</strong></th>
</tr>
</table>
How can I differentiate between the two?
Is it possible to have the side borders of HTML tables like this:
A vertical line that is not connected to the top and bottom of the table.
You can try this :
body{
background:grey;
}
table, th, td {
border-top: 1px solid #fff;
border-bottom : 1px solid #fff;
border-collapse: collapse;
text-align:center;
padding:10px;
}
table
{
position: absolute ;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:2px solid #fff;
}
td
{
position:relative ;
}
td::after
{
content:'';
position:absolute ;
height:70%;
width:100%;
left:0;
top:7px;
border-left:3px solid #fff;
}
td:nth-child(1)::after
{
display:none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:20%">
<tr>
<th>Firstname</th>
<th>Lastname</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>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
.table {
background-color: #272727;
width: 100%;
text-align: left;
border-collapse: collapse;
}
.table__body-row {
height: 41px;
border-bottom: 1px solid #000000;
}
.table__body-row.filled {
background: #191919;
}
.table__body-cell {
font-size: 14px;
color: #FFFFFF;
border: none;
}
.table__header {
background: #000000;
}
.table__header-row {
height: 40px;
}
.table__header-cell {
font-size: 12px;
font-weight: 400;
color: #FFFFFF;
text-align: left;
padding: 0 16px 0 16px;
}
.table__cell-body {
border-right: 1px solid #000000;
padding: 0 10px 0 10px;
min-height: 17px;
}
.table__body-cell:last-of-type .table__cell-body {
border-right: none;
}
<table class="table">
<thead class="table__header">
<tr class="table__header-row">
<th class="table__header-cell">
Header 1
</th>
<th class="table__header-cell">
Header 2
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr class="table__body-row">
<td class="table__body-cell">
<div class="table__cell-body"></div>
</td>
<td class="table__body-cell">
<div class="table__cell-body"></div>
</td>
</tr>
</tbody>
</table>
This can be done using a nested div with a border. Please see snippet.
I'm trying to learn some HTML & CSS skills and I facing an issue that I couldn't find any proper solution online.
I'm trying to add some border-spacing to both sides to my designed table. please see the attached images for better understanding
Current table:
https://imgur.com/6eKSfVC
Desired table:
https://imgur.com/Vvafhlg
My code:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
<style>
table {
text-align: center;
font-size: 10pt;
height: 22px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
bgcolor="#ffffff";
font-family: calibri;
color: #707070;
width: 50%;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
<br><br><br>
</body>
Would you guys help me a proper solution?
Thanks!
Hope this solves your problem
Add your table in a div then apply padding and box-shadow to the box (div).
table {
text-align: center;
font-size: 10pt;
height: 22px;
width:100%;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th, td{
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
.table-box {
padding:20px;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="table-box">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
</html>
Here is your solution, try with this way it will helps you.
.main-card {
padding: 10px 30px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
width: 50%;
border-radius: 10px;
}
table {
width: 100%;
text-align: center;
font-size: 10pt;
height: 22px;
background-color: #ffffff;
font-family: calibri;
color: #707070;
border-collapse: collapse;
}
th,
td {
padding-top: 10px;
padding-bottom: 10px;
}
tr {
padding-top: 10px;
padding-bottom: 10px;
border: solid #1AAE9F;
border-width: 1px 0;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Deshe Email Monthly Update</title>
</head>
<body>
<div class="main-card">
<table>
<tr>
<th>Symbol</th>
<th>Position</th>
<th>Return</th>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
<tr>
<td>AAPL</td>
<td>Short</td>
<td>40.1%</td>
</tr>
</table>
</div>
</body>
.table-wrapper {
display: flex;
width: 50vw;
max-width: 300px;
}
.table-theme {
padding: 0.5em 2em;
border-radius: 10px;
box-shadow: 0 3px 6px 0 rgba(44, 40, 40, 0.11);
font-size: 12px;
}
.table-theme caption {
font-size: 1.5em;
font-weight: bold;
margin: 0.5em;
}
.table-theme > table {
text-align: center;
font-size: 10pt;
height: 22px;
background-color: "#ffffff";
font-family: Calibri;
color: #707070;
border-collapse: collapse;
width: 100%;
}
.table-theme tbody tr {
padding: 0 75em;
border: solid #1AAE9F;
border-width: 1px 0;
}
.table-theme tbody tr:last-child {
border-bottom: none;
}
.table-theme thead th {
padding: 0.25em 0;
}
.table-theme tbody td {
padding: 0.75em 0;
}
/* example */
.table-theme td[data-th="Symbol"] {
font-size: 1.1em;
}
.table-theme th[title="Return"],
.table-theme td[data-th="Return"] {
color: green;
font-weight: bold;
}
<div class="table-theme table-wrapper">
<table>
<caption>Februari biggest gainers</caption>
<thead>
<tr>
<th title="Symbol">Symbol</th>
<th title="Position">Position</th>
<th title="Return">Return</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
<tr>
<td data-th="Symbol">AAPL</td>
<td data-th="Postion">Short</td>
<td data-th="Return">40.1%</td>
</tr>
</tbody>
</table>
</div>
I have this code where I am trying to color all 4 sides of a TD cell with red, but if you run the code, only the bottom and the right border are getting color (in Mozilla Firefox). Is there a way to color all 4 borders?
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border-color:red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
This question/answer does not help: CSS Border declare 4 sides, color, width, in one line
If there is a way to style it via a class, that will be better than using a an inline style command.
Change your inline style to style="border:1px double red;":
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border:1px double red;">XXX-8</td>
</tr>
</tbody>
</table>
</div>
A little trick, create an ::after to the td you want to add the border.
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
position:relative;
}
#selections_table td.border-red::after{
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid red;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td class="border-red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/ym82a0k7/
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td>XXX-8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
First, you don't need to declare td here:
#selections_table td,th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
So,
#selections_table th {
border: 1px solid black;
border-bottom: 1px solid red;
padding: 3px 4px 3px 4px;
}
td {
border: 1px solid red;
}
This is another option (by increasing the pixel, it is not a good practice but another option)
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 2px solid red;
}
or just like this:
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 1px double red;
}
i tried creating a hover effect using css, where if the user hovers through the table's rows, it will change the background-color to red. But i notice when i hover the rows, instead of filling up the whole row with red, it fills up only the individual cells.
Here is my code:
.GridviewScrollHeader TH,
.GridviewScrollHeader TD {
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
vertical-align: bottom;
text-align: left;
}
.GridviewScrollItem TD {
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
.GridviewScrollItem TD:hover {
background-color: red;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Test
</title>
<link href="GridviewScroll.css" rel="stylesheet" />
<style type="text/css">
BODY,
TD {
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
font-size: 12px;
color: #333333;
}
</style>
</head>
<body>
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
<tr class="GridviewScrollHeader">
<td colspan="2">Product</td>
<td rowspan="2">ListPrice</td>
<td rowspan="2">StandardCost</td>
<td colspan="2">Package</td>
<td rowspan="2">SafetyStockLevel</td>
<td rowspan="2">ReorderPoint</td>
<td rowspan="2">SellStartDate</td>
</tr>
<tr class="GridviewScrollHeader">
<td>Name</td>
<td>Number</td>
<td>Weight</td>
<td>Size</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Black, 38</td>
<td>FR-M94B-38</td>
<td>1349.6000</td>
<td>739.0410</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Silver, 38</td>
<td>FR-M94S-38</td>
<td>1364.5000</td>
<td>747.2002</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
</table>
</body>
</html>
That happens, because you set the Hover Effect only to the td elements, not the whole row. If you remove the td from your css and only apply the hover to the tr Elements, it works.
Note: You have to remove the specific background color of the td Elements, because they would override the tr:hover effect. Please take a look at the working snippet below.
.GridviewScrollHeader th, .GridviewScrollHeader td {
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
vertical-align: bottom;
text-align: left;
}
.GridviewScrollItem TD {
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
}
.GridviewScrollItem {
background: #fff;
}
.GridviewScrollItem:hover {
background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
<tr class="GridviewScrollHeader">
<td colspan="2">Product</td>
<td rowspan="2">ListPrice</td>
<td rowspan="2">StandardCost</td>
<td colspan="2">Package</td>
<td rowspan="2">SafetyStockLevel</td>
<td rowspan="2">ReorderPoint</td>
<td rowspan="2">SellStartDate</td>
</tr>
<tr class="GridviewScrollHeader">
<td>Name</td>
<td>Number</td>
<td>Weight</td>
<td>Size</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Black, 38</td>
<td>FR-M94B-38</td>
<td>1349.6000</td>
<td>739.0410</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Silver, 38</td>
<td>FR-M94S-38</td>
<td>1364.5000</td>
<td>747.2002</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
</table>
Change your hovering css to below code.
.GridviewScrollItem:hover TD
{
background-color: red;
}
Please check this EXAMPLE
What I tried is different and may have some issues but I cant say I didnt try I do see better results from others :)
CSS:
.GridviewScrollHeader TH, .GridviewScrollHeader TD{
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
vertical-align: bottom;
text-align: left;
}
.GridviewScrollItem TD{
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
/* The :nth-child() Does not work on some versions of IE
removing it will only let you highlight other fields there on until the end of the "td"
just add overflow-x:hidden if you remove the nth child and make the table full screen width by setting body margin to 0*/
.GridviewScrollItem TD:nth-child(1):hover{
background-color: red;
width:98.4%; /* If you ever Change the margins make sure to change this accordingly */ /* full screen is 100% but take note of margins */
position:absolute;
opacity:0.5; /* Does not work in IE9 or less */ /* Check for other opacity attributes for older IE Browsers */
font-weight:bold; /* To Darken text to still be visable */
}
The HTML hasn't changed and it does seem to rely on opacity but this is my results some of you may disagree.
You just need to put the hover to whole table row means your tr, now you have only to your td
Just add hover to your row:
.GridviewScrollItem:hover {
background-color: red;
}
.GridviewScrollHeader th, .GridviewScrollHeader td {
padding: 5px;
font-weight: bold;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
background-color: #EFEFEF;
vertical-align: bottom;
text-align: left;
}
.GridviewScrollItem TD {
padding: 5px;
white-space: nowrap;
border-right: 1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
}
.GridviewScrollItem {
background: #fff;
}
.GridviewScrollItem:hover {
background-color: red;
}
<table cellspacing="0" id="GridView1" style="width:100%;border-
collapse:collapse;">
<tr class="GridviewScrollHeader">
<td colspan="2">Product</td>
<td rowspan="2">ListPrice</td>
<td rowspan="2">StandardCost</td>
<td colspan="2">Package</td>
<td rowspan="2">SafetyStockLevel</td>
<td rowspan="2">ReorderPoint</td>
<td rowspan="2">SellStartDate</td>
</tr>
<tr class="GridviewScrollHeader">
<td>Name</td>
<td>Number</td>
<td>Weight</td>
<td>Size</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Black, 38</td>
<td>FR-M94B-38</td>
<td>1349.6000</td>
<td>739.0410</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
<tr class="GridviewScrollItem">
<td>HL Mountain Frame - Silver, 38</td>
<td>FR-M94S-38</td>
<td>1364.5000</td>
<td>747.2002</td>
<td>2.68</td>
<td>38</td>
<td>500</td>
<td>375</td>
<td>7/1/2005 12:00:00 AM</td>
</tr>
</table>