I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?
Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.
First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }
Related
enter image description hereI have a table with mouse hover effect, where last column is merged. Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
{
background-color: #ffff99;
}
</style>
<body style="text-align:center">
<h1 style="color:green;">
Mouse Hover
</h1>
<h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td>Gloria Jean's Coffees</td>
<td>Coffee</td>
<td rowspan="3" class="highlight" data-cell="c5">Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
</tr>
</table>
</body>
</html>
`
When I hover a particular row, hover effect works properly. But when I hover to the last merged column, hover effect work for 1st row also.
I want that, when I hover to the last merged column, hover effect only work on that particular merged column, not 1st row.
as per comment, here i use small jquery code also,
use hover function of jquery and other row use css hover with css :not property.
try like below,
$(document).ready(function(){
$('.nothighlight').hover(
function () {
$('.nothighlight').css('background','#ffff99');
},
function () {
$('.nothighlight').css('background','#ffffff');
}
);
});
table,th,td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
background-color: #ffff99;
}
.highlight:hover
{
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="text-align:center">
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td class="nothighlight">Gloria Jean's Coffees</td>
<td class="nothighlight">Coffee</td>
<td rowspan="3" class="highlight" >Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
<td style="display: none;"></td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
<td style="display: none;"></td>
</tr>
</table>
</body>
Can someone please tell me how, to insert data in a row? I just want to write something in these 2 rows:
The red + are the cells in which i want to insert text. I tried many things but it always ended up
building a new line. I would appreciate help :)
My html code:
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan Attribute</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body style = "text-align:center">
<table>
<tr>
<td>Ajay</td>
<TD ROWSPAN="3">Bild1</TD>
<TD>Bananas</TD>
<TD ROWSPAN="3">Bild2</TD>
</tr>
<tr>
<td>Priya1</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
</body>
</html>
You need to add data in second and third row, so you need to enter those data in second and third <tr> itself.
Here it is
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
<table>
<tr>
<td>Ajay</td>
<td ROWSPAN="3">Bild1</td>
<td>Bananas</td>
<td ROWSPAN="3">Bild2</td>
</tr>
<tr>
<td>Priya1</td>
<td>Bananas</td>
</tr>
<tr>
<td>Priya</td>
<td>Bananas</td>
</tr>
</table>
html table border rendering problem on chrome. I hava code like:
table {
border-collapse: collapse;
}
#first td {
width: 200px;
height: 80px;
border-style: dashed;
}
#second td {
width: 200px;
height: 80px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="first">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
<br/>
<table id="second">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
</body>
</html>
On first table, the left border of c2 is looks like a solid line, while I set to td {border-style: dashed;}. I'm troubled.
On second table, why the left border of c2,c3 are darker then c1's on Chrome?
And how to fix them? All the test works fine in Firefox.
You can use solid color instead of used rgba color
td {
border-style: solid;
border-color:#ddd;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #ddd;
/* border-collapse: collapse; */
border-collapse: collapse;
}
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
it because of you give opacity to border color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border-style: solid;
border-color: #a3a3a3;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #a3a3a3;
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>
Insted of using rgba -- border-color: rgba(0, 0, 0, 0.2); ====== use #c1c1c1 code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border: dashed 1px #c1c1c1;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>
How can I also change the column borders in a HTML Table using Bootstrap CSS?
This is where I have gone so far:
Boostrap Pre-Defined Table
The table lays inside a jumbotron and I would like to change the table borders and lines so It can be more distinguishable. This is where I have gone so far.
As you can see, the table lines between columns remain the same. How can this be changed?
Any other suggestions on improving the Table Appearance are gratefully accepted
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Employees</h2>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
table.css
.jumbotron{
margin-top:250px
}
tr {
border: 3px solid gray;
}
Code is now in JsFiddle.
Try this
.jumbotron .table-bordered tbody tr {
border: 3px solid gray;
}
.jumbotron .table-bordered tbody tr td {
border: 3px solid gray;
}
.jumbotron .table-bordered tbody tr {
border: 3px solid gray;
}
.jumbotron .table-bordered thead tr {
border: 3px solid gray;
}
.jumbotron .table-bordered thead tr th {
border: 3px solid gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Employees</h2>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Add border left & right to td & th:
table td ,table th{
border-left: 3px solid gray !important;
border-right: 3px solid gray !important;
}
table td:first-child {
border-left: none;
}
table td:last-child {
border-right: none;
}
.table-bordered td, .table-bordered th {
border: 3px solid gray !important;
}
The reason why you are not being able to set column border is because of the CSS specificity.
Your rule is being overridden by more specific rules, the most specific one for <td> in your case is .table-bordered>tbody>tr>td which is set by the Bootstrap.
You have couple of options to how to deal with this situation:
Use more specific rule
Write rule that will override the one set by Bootstrap, for example:
HTML
<table id="employees-table" class="table table-bordered">
...
</table>
CSS
#employees-table td,
#employees-table th
{
border: 3px solid gray;
}
Use !important exception
Using !important is considered to be a bad practise, but for your case it might be the most quickest/easiest solution:
table td,
table th
{
border: 3px solid gray !important;
}
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.