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>
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?
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'm applying an external CSS to an HTML project to include borders in
formatting for a table. Everything is applying to my table except the
borders no matter what.
I have tried applying table {}, as well as table, th, td {}
table,
th,
td {
border-collapse: collapse;
border: 2px #022D41;
background-color: #DAECF3;
text-align: center;
margin: auto;
table {
border-collapse: seperate;
width: 2;
background-color: "#1AA6B7";
border: 2px "#FE424D";
text-align: center;
margin: auto;
/*aligning table to the center*/
}
th {
border: 3px "#FE424D";
background-color: "#022D41";
color: #DAECF3;
}
td {
border: 3px "#FE424D";
}
<table border="4">
<tr>
<th>Company</th>
<th>Location</th>
<th>Dates Employed</th>
<th>Title/Duties</th>
</tr>
<tr>
<td>Mercury Systems</td>
<td>Hudson, NH</td>
<td>May 20, 2019 - <br>Current</td>
<td>Continous<br> Improvement<br> Intern</td>
</tr>
<tr>
<td>Manchester<br> Public Schools</td>
<td>Manchester, NH</td>
<td>January 2017 - <br>August 2018</td>
<td>Para-Professional</td>
</tr>
<tr>
<td>Penobscot<br>Indian Island</td>
<td>Old Town, ME</td>
<td>November 2015 - <br>January 2017</td>
<td>Youth Program<br>Coordinator</td>
</tr>
</table>
Trying to do a dotted/solid border around and between the table.
You must add the style of the border as the other person already said, but the order it's {size} {style} {color}.
The two main reasons your code isn't working are: You've forgotten to close the first table rule and the order of the arguments for the border rule.
Eg: border: 2px solid #FFFFFF. And you must not use the color as "#FFFFFF" (remove the quotes mark).
table,
th,
td {
border-collapse: collapse;
border: 2px solid #022D41;/* add the border style (solid) */
background-color: #DAECF3;
text-align: center;
margin: auto;
} /* You've forgot to close this rule */
table {
border-collapse: seperate;
width: 2;
background-color: #1AA6B7; /* remove the "" */
border: 2px solid #FE424D; /* remove the "" and add the border-style */
text-align: center;
margin: auto; /*aligning table to the center*/
}
th {
border: 3px solid #FE424D; /* remove the "" and add the border-style */
background-color: "#022D41"; /* remove the "" */
color: #DAECF3; /* you're using the same backgorund-color as the text color */
color: #000;
}
td {
border: 3px solid #FE424D; /* add the border style and remove the "" */
}
<table border="4">
<tr>
<th>Company</th>
<th>Location</th>
<th>Dates Employed</th>
<th>Title/Duties</th>
</tr>
<tr>
<td>Mercury Systems</td>
<td>Hudson, NH</td>
<td>May 20, 2019 - <br>Current</td>
<td>Continous<br> Improvement<br> Intern</td>
</tr>
<tr>
<td>Manchester<br> Public Schools</td>
<td>Manchester, NH</td>
<td>January 2017 - <br>August 2018</td>
<td>Para-Professional</td>
</tr>
<tr>
<td>Penobscot<br>Indian Island</td>
<td>Old Town, ME</td>
<td>November 2015 - <br>January 2017</td>
<td>Youth Program<br>Coordinator</td>
</tr>
</table>
https://developer.mozilla.org/en-US/docs/Web/CSS/border
I believe you need to add solid or dotted to the border property to make it appear. In your case, you would need:
border: solid 2px "#FE424D";
for a solid border, or
border: dotted 2px "#FE424D";
for a dotted one.
Example:
.table_dark {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 640px;
text-align: left;
border-collapse: collapse;
background: #311B92;
border: 7px solid red;
}
.table_dark th {
color: #EDB749;
border-bottom: 1px dotted #37B5A5;
border-right: 1px dotted #37B5A5;
padding: 12px 17px;
}
.table_dark td {
color: #CAD4D6;
border-bottom: 1px dotted #37B5A5;
border-right: 1px dotted #37B5A5;
padding: 7px 17px;
}
.table_dark tr:last-child td {
border-bottom: none;
}
.table_dark td:last-child {
border-right: none;
}
.table_dark tr:hover td {
text-decoration: underline;
}
<table class="table_dark">
<tr>
<th>Company</th>
<th>Location</th>
<th>Dates Employed</th>
<th>Title/Duties</th>
</tr>
<tr>
<td>Mercury Systems</td>
<td>Hudson, NH</td>
<td>May 20, 2019 - <br>Current</td>
<td>Continous<br> Improvement<br> Intern</td>
</tr>
<tr>
<td>Manchester<br> Public Schools</td>
<td>Manchester, NH</td>
<td>January 2017 - <br>August 2018</td>
<td>Para-Professional</td>
</tr>
<tr>
<td>Penobscot<br>Indian Island</td>
<td>Old Town, ME</td>
<td>November 2015 - <br>January 2017</td>
<td>Youth Program<br>Coordinator</td>
</tr>
</table>
I'm new to CSS and HTML and I'm trying to vertically center some text in a table header. At the moment the text is aligned with the top of the table cell. I was unsuccessful with vertical-align: middle;, and the only solution seems to be to add padding-top to match the space underneath the text. However this is not the best solution because I would like to have the text fit snugly within the table cell. Any ideas are appreciated.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u><br><br><br></th>
<th><u>Contact</u><br><br><br></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
You have done it right in your CSS, just remove your <br> tags. E.g.
<th><u>Resource</u></th>
The vertical alignment won't work whilst you're manually inserting lines under your headings.
Full example
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1<br><br></td>
<td align="left" width=35%;>999-999-9999<br> <br></td>
</tr>
<tr>
<td align="left">Resource 2<br><br></td>
<td align="left">888-888-8888<br><br></td>
</tr>
<tr>
<td align="left">Resource 3<br><br></td>
<td align="left" width=35%;>777-777-7777<br> <br></td>
</tr>
</tbody>
</table>
</div>
Try like this , why are you put <br> and <td> to <th>
Table <td> The elements are the data containers of the table.
HTML Tag is
A line break is marked up as follows:
This text contains<br>a line break.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
learn more about html table https://www.w3schools.com/html/html_tables.asp
Define a height value for the th elements
Define an explicit (absolute) height for your table header cells (th) using length unit values (e.g: 65px), then declare the vertical-align rule on these elements.
Code Snippet Demonstration:
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding: 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
/* additional */
height: 65px;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage" style="display:block">
<br><br><br><br>
<h3>Page title here</h3><br><br><br>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<th align="left">Resource 1<br><br></th>
<th align="left" width=35%;>999-999-9999<br> <br></th>
</tr>
<tr>
<th align="left">Resource 2<br><br></th>
<th align="left">888-888-8888<br><br></th>
</tr>
<tr>
<th align="left">Resource 3<br><br></th>
<th align="left" width=35%;>777-777-7777<br> <br></th>
</tr>
</tbody>
</table>
</div>
Don't use <br> tags for layout - that's a no-go! It will mess up whatever you try concerning vertical alignment and top/bottom padding and margins, like in the code in your question.
Erase them all and use top and bottom padding instead.
If still needed, use vertical-align, but in most cases you won't need it. And use the td tag for cells in the tbody, not th.
body {
font-size: 18px;
font-family: 'Open Sans', sans-serif;
text-align: center;
color: black;
background-size: 100%;
padding:0;
}
#myWebPage > h3 {
padding: 40px 0;
}
.mytable {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 80%;
}
.mytable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 30px 0;
/*padding: 30px;*/
text-align: center;
vertical-align: middle;
}
.mytable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 30px;
}
<div id="myWebPage">
<h3>Page title here</h3>
<table class="mytable" align="center">
<thead>
<tr>
<th><u>Resource</u></th>
<th><u>Contact</u></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Resource 1</td>
<td align="left" width=35%;>999-999-9999</td>
</tr>
<tr>
<td align="left">Resource 2</td>
<td align="left">888-888-8888</td>
</tr>
<tr>
<td align="left">Resource 3</td>
<td align="left" width=35%;>777-777-7777</td>
</tr>
</tbody>
</table>
</div>
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>