how I can achieve this same result with on hover, dotted border for each item in the list. Try it yourself by hovering the packages.
https://www.bitrix24.com/prices/
Very simple,
Try
tr:hover{
outline: thin dashed;
}
Working Example:
Link https://codepen.io/vikas_saini/pen/poogeWx
you can use this particular div. if you need these attraction
very easiest css :
tr:hover {
position: absolute;
border: 2px dotted #68ddff;
transition: all 0.2s ease-in-out;
}
i think good working for you.
Thanks
You can try this.
#mytable tr.row:hover td
{
border: 1px solid red;
}
#mytable tr.row:hover td
{
border: 1px solid red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr{
transition: outline 1s;
outline: thin solid;
outline-color: transparent;
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Table</h2>
<table id="mytable">
<tr class="row">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="row">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="row">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="row">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr class="row">
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="row">
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="row">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Related
Sorry if the title isn't descriptive, I didn't know how to word it. Here's the table in question.
Is it possible for me to remove the white border (the background of the table) from this upper-left cell? I still want this white background between the rest of the cells, but in that upper-left I want it removed. Here's how I want it to look.
My initial thought is to have some ::after pseudo-element on that cell that has some border or padding that can cover that gap between the cell and page background, but I don't know how to do that. Any ideas?
Here's the CSS on this page.
body{
background: #C3DEF2;
font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif;
}
table{
background: white;
table-layout: fixed;
}
tr:nth-child(even){
background: lightgray;
}
td{
padding: 20px;
}
td.corner{ /* cell in upper-left corner */
background: #C3DEF2;
}
.head1{ /* top row */
text-align: center;
}
.head2{ /* leftmost column */
text-align: right;
}
.head1, .head2{
background: lightblue;
text-transform: uppercase;
font-weight: 600;
}
As requested, here's some of the HTML relating to this part of the table.
<table id="the_table" width="100%">
<tbody>
<tr class="head1">
<td class="corner"></td>
<td>Candidate 1</td>
<td>Candidate 2</td>
</tr>
<tr>
<td class="head2">Education</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Election Reform</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Environment</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Foreign Policy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Probably more importantly, where does this border come from? It's the white background of the table, but what causes that space between the cells?
Here's a quick solution:
HTML:
<table>
<tr>
<td style="border: 1px inset white;">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS:
table {
margin: 20px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
td:hover {
border: 1px solid red;
}
DEMO:
https://liveweave.com/7eIF6k
I have seen a few similar questions but they don't match what I am after. I have a situation where a table can have inner tables. However, I like the inner table to ignore the styles defined by "myTable". How can I do this?
Preferably, without adding a CSS for inner table. Or at least without adding a new class or reference to an ID for the inner table. Thank you for any help.
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
Deryck has the right answer altough it's not complete because of browser implementation and missing tr
#myTable > tbody > tr > td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > tbody > tr > th {
border: 1px solid #ddd;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
If you are trying to make it so the styles you have there don't apply to anything but the specific children (tr, th, etc at the top level) you can use > to specify the style to only apply to the direct children of #myTable
#myTable > td, #myTable > th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
word-wrap: break-word;
}
#myTable > th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #00bf11;
color: white;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 12px;
font-family: Verdana, sans-serif;
table-layout: fixed;
}
<html>
<body>
<table id="myTable">
<tr class="header">
<th onclick="sortTable(0)" style="width:6%;">Col1</th>
<th onclick="sortTable(1)" style="width:9%;">Col2</th>
<th onclick="sortTable(2)" style="width:85%;">Col3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<table class="table table-bordered">
<tbody>
<tr>
<th>Col One</th>
<th>Col Two</th>
<th>Col Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</td>
</table>
</body>
</html>
I am unable to create the HTML code for this table. How to do that?enter image description here
The error you are probably running in to is that "E" needs to be on its own row... There are certainly other ways to do this (including not using tables). But to answer the question you posed:
<table border=1>
<tr>
<td>A</td><td rowspan=2>D</td>
</tr>
<tr>
<td rowspan=2>B</td>
</tr>
<tr>
<td rowspan=2>E</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
table {
border: 2px solid ;
border-collapse: collapse;
}
td {
border: 2px solid;
padding: 20px;
}
<table>
<tr>
<td rowspan="2">A</td> <td rowspan="3">D</td>
</tr>
<tr>
<!-- <td rowspan="2">A</td> --> <!-- <td rowspan="3">D</td> -->
</tr>
<tr>
<td rowspan="2">B</td> <!-- <td rowspan="3">D</td> -->
</tr>
<tr>
<!-- <td rowspan="2">B</td> --> <td rowspan="3">E</td>
</tr>
<tr>
<td rowspan="2">C</td> <!-- <td rowspan="3">E</td> -->
</tr>
<tr>
<!-- <td rowspan="2">C</td> --> <!-- <td rowspan="3">E</td> -->
</tr>
</table>
Or with grid
.grid {
display: inline-grid;
grid-template-areas:
"A D"
"A D"
"B D"
"B E"
"C E"
"C E"
;
border-style: solid;
border-width: 2px 0 0 2px;
}
.grid .a,
.grid .b,
.grid .c,
.grid .d,
.grid .e {
padding: 20px;
border-style: solid;
border-width: 0 2px 2px 0;
display: flex;
align-items: center;
}
.grid .a {
grid-area: A;
}
.grid .b {
grid-area: B;
}
.grid .c {
grid-area: C;
}
.grid .d {
grid-area: D;
}
.grid .e {
grid-area: E;
}
<div class="grid">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
</div>
Im not sure why you are using Table for this. Any way we can achieve this by following HTML
<!DOCTYPE html>
<html>
<head>
<style>
td {
width: 100px;
height: 100px;
}
table.child tr,
table.child tr td {
padding: 0px;
}
table.child,
table.child tr {
border: 1px solid #fff;
}
table.child tr td {
border: none;
}
table.child,
table.child tr,
table.child tr td {
border: none;
border-collapse: collapse;
}
table.base,
table.base tr,
table.base tr td {
border-collapse: collapse;
}
table.base tbody tr,
table.base tbody tr td {
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<h2>Table</h2>
<table border=1 class="base">
<tr>
<td>
A
</td>
<td rowspan=3 style="padding: 0">
<table border=1 class="child">
<tr>
<td style="border-bottom: 1px solid">
D
</td>
</tr>
<tr>
<td>
E
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign=middle>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</body>
</html>
I think it will help you
HTML
<table>
<tr>
<td rowspan="2">A</td>
<td rowspan="3">D</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">B</td>
</tr>
<tr>
<td rowspan="3">E</td>
</tr>
<tr>
<td rowspan="2">C</td>
</tr>
<tr></tr>
</table>
CSS
<style>
table {
width:55%;
}
table, th, td {
border: 3px solid black;
border-collapse: collapse;
}
th, td {
padding: 45px 10px;
text-align: center;
font-weight: 600;
font-size: 20px;
}
</style>
I'd like to add a border around TD-elements upon hovering.
td:hover{border: 4px solid #dddddd;}
This adds a border but resizes the cell.
How can I prevent the resizing?
I tried adding extra padding and deduct the padding upon hovering, but that did not give the desired result.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 400px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td:hover{
border: 4px solid #dddddd;
}
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Use an outline instead of a border.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 400px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td:hover{
outline: 4px solid #dddddd;
}
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
I think this will solve your issue -
I have used position attribute of CSS for this result. Not used outline attribute because it will overflow your td.
I have added this additional code to your snippet.
td {
position: relative;
}
td:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
td:hover:after {
border: 4px solid #dddddd;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 400px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
td {
position: relative;
}
td:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
td:hover:after {
border: 4px solid #dddddd;
}
<body>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/fr8Kw/
Html:
<!DOCTYPE html>
<html>
<head>
<title>Table Pagination</title>
<style>
body {
font-family: Tahoma;
}
h3 {
background-color: rgb(232, 232, 232);
font-size: 14px;
font-weight: bold;
color: gray;
width: 786px;
height:25px;
margin:2em auto;
padding-top:10px;
padding-left:8px;
margin-bottom: -23px;
border: 1px solid;
border-color: #888888;
}
table {
table-layout: fixed;
font-size: 12px;
width: 810px;
margin: 2em auto ;
}
thead {
background:rgb(232, 232, 232);
color: gray;
height:20px;
}
td {
width: 10em;
height:20px;
word-wrap: break-word;
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/){
text-align: center;
width:30px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(2 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(3 /*this is the column number*/) {
width:250px
}
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(4 /*this is the column number*/){
width:60px
}
#localFileCopyingDiv #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(5 /*this is the column number*/) {
width:220px
}
tbody {
background:#D8D8D8
}
div.pager {
width: 799px;
text-align: left;
margin: 0 auto;
margin-top: -20px;
}
div.pager span {
display: inline-block;
width: 10px;
height: 10px;
cursor: pointer;
background:rgb(156, 187, 203);
color: #fff;
margin-right: 0.5em;
font-size: 13px;
padding-top: 8px;
padding-left:8px;
padding-bottom: 8px;
padding-right:8px;
}
div.pager span.active {
background: rgb(123, 167, 198);
}
.highlightedRow {
color : red;
}
#fileWritingDiv table tbody {
color : red;
}
</style>
<script type="text/javascript" src="resources/javascripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="localFileCopyingDiv">
<h3>Local File Copying Info:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="supplementaryMaterialsDiv">
<h3>Supplementary Materials:</h3>
<table class="paginated">
<thead>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="assetsDiv">
<h3>Assets:</h3>
<table class="paginated">
<thead>
<tr>
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
<tr>
<td>1</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>D:\local\asdsad\asdsad\asdsad\\asdsadsa</td>
<td>Error</td>
<td>asudhasiodjiposadhsoapidyhwuiqohdisakdnsakljhndiuosahdioasndioasyhdiuosadosadhaosiydiosadosahydiosahdosahdoysadhiosadosayhdiosahdiosahdiosadsad</td>
</tr>
</tbody>
</table>
</div>
<div id="fileWritingDiv">
<h3>File Writing Status</h3>
<table>
<thead>
<tr>
<td>File Name</td>
<td>Error Cause</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"
src="resources/javascripts/tablePagination.js" /></script>
</body>
</html>
Problem: the following CSS rule is not being applied to any column. Why not?
#localFileCopyingDiv, #supplementaryMaterialsDiv, #assetsDiv, table tr td:nth-child(1 /*this is the column number*/)
{
text-align: center;
width:30px
}
notice in your Assets table you have a TR within a TR..
<table class="paginated">
<thead>
<tr> <----
<tr>
<td>No.</td>
<td>Local File Locataion</td>
<td>Server File Locataion</td>
<td>Status</td>
<td>Error Cause</td>
</tr>
</tr> <----
</thead>
<tbody>
remove the stray TR and the 1st col becomes 30px wide.
try like this
.paginated tbody tr td:nth-child(2) {
text-align: center;
width:30px;
}