i hava problem.
This is my table:
This should be my table when I hover
If I now hover a row, it should have a color background and a line should be displayed on the side, which is a little thicker.
The head area should not be highlighted in color. (head are = Produkt, Datum, Summe).
How do I do that? With the following code I only have the individual rows highlighted in color and not the line. How the do I add the line and not hover the head area?
table.ordertable tr:hover {
border-width: 1px;
padding: 8px;
padding: 10px 0;
border-width: 1px 0;
border-color: #EEEEEE;
border-style: solid;
background-color: #badafc;
}
creating of the table
function showOrders(orderlist) {
console.log(orderlist);
var table = document.createElement("table");
table.className="ordertable";
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var headRow = document.createElement("tr");
["Produkt","Datum","Summe"].forEach(function(el) {
var th=document.createElement("th");
th.appendChild(document.createTextNode(el));
headRow.appendChild(th);
});
thead.appendChild(headRow);
table.appendChild(thead);
orderlist.forEach(function(el) {
var tr = document.createElement("tr");
for (var o in el) {
var td = document.createElement("td");
td.appendChild(document.createTextNode(el[o]))
tr.appendChild(td);
}
tbody.appendChild(tr);
});
table.appendChild(tbody);
return table;
}
you can add border-left property in your css
table.ordertable tr:hover {
border-width: 1px;
padding: 8px;
padding: 10px 0;
border-width: 1px 0;
border-color: #EEEEEE;
border-style: solid;
background-color: #badafc;
border-left: 5px solid blue; <----- new property you can change color and strength by px
}
Add this border-bottom: 3px solid black;
like...
table.ordertable tr:hover {
border-width: 1px;
padding: 8px;
padding: 10px 0;
border-width: 1px 0;
border-color: #EEEEEE;
border-style: solid;
background-color: #badafc;
border-bottom: 3px solid black;
}
You can add the border border-left
table.ordertable tr:hover {
border-width: 1px;
padding: 8px;
padding: 10px 0;
border-width: 1px 0;
border-color: #EEEEEE;
border-style: solid;
background-color: #badafc;
border-left: 5px solid blue;
}
also to make sure that your header doesn't get the hover effect, add a class t-row to all the table rows, except the row containing header, and change your CSS as following.
table.ordertable tr.t-row:hover {
border-width: 1px;
padding: 8px;
padding: 10px 0;
border-width: 1px 0;
border-color: #EEEEEE;
border-style: solid;
background-color: #badafc;
border-left: 5px solid blue;
}
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.table {
border-collapse: collapse;
}
.table td,
.table th {
padding: 5px 10px
}
.table tr {
border-bottom: 1px solid #EAEAEA;
}
.table tbody tr {
position: relative;
transition: 0.3s;
}
.table tbody tr td:first-child:before {
content: '';
position: absolute;
left: 0;
height: 100%;
width: 4px;
background-color: #00A2E8;
top: 0;
border-radius: 5px;
transition: 0.3s;
opacity: 0;
}
.table tbody tr:hover {
background-color: #D5F2FF;
}
.table tbody tr:hover td:first-child:before {
opacity: 1;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Produkt</th>
<th>Datum</th>
<th>Summe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Burger Pommes</td>
<td>20.05.2020</td>
<td>15</td>
</tr>
<tr>
<td>Pommes Wasser Coca Cola</td>
<td>21.05.2020</td>
<td>18</td>
</tr>
</tbody>
</table>
</body>
</html>
</html>
Related
I need to achieve something like this with HTML table:
I have tried but if there is another/better solution please share:
https://jsfiddle.net/mso268dr/113/
It just adds 4 empty cells and ::before blocks in two of them.
It uses transform rotate of 45 deg. of one border side of ::before.
table {
border: 2px solid red;
border-collapse: collapse;
box-sizing: border-box;
}
table th, table td {
background-color: #eff;
border: 1px solid gray;
padding: 0.2em 0.5em;
}
table th {
background-color: #a85;
color: #eee;
border: 1px solid #5f5;
}
.t {
position: relative;
border-bottom: none;
border-right: none;
}
.t + * {
border-left: none;
border-right: none;
}
.bs {
border-top: none;
border-right: none;
}
.bs + * {
border-left: none;
border-right: none;
}
.t::before, .b::before {
content: "";
height: 100%;
background-color: none;
border-left: 1px solid #5f5;
transform: rotate(-45deg);
transform-origin: bottom;
position: absolute;
left: 100%;
top: 0;
}
.b::before {
transform-origin: top;
left: -1px;
}
.b {
position: relative;
border-left: none;
border-top: none;
}
.te {
border-left: 0;
border-bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table test</title>
</head>
<body>
<table>
<tr>
<th class="t"></th>
<th>TOP - Right label</th>
<th class="te"></th>
<th rowspan=2>some label</th>
</tr>
<tr>
<th class="bs"></th>
<th>BOTTOM label</th>
<th class="b"></th>
</tr>
<tr>
<td colspan=3>some text</td>
<td>some text</td>
</tr>
</table>
</body>
</html>
if it could be done without additional empty cells only by ::before statements it would be a good improvement.
Thanks in advance!
I have a table inside an overflowing < div >. I am struggling to make bottom-border, either for the table or for the div, that will look nice. The current situation is: when overflowing, the bottom-border of the div looks nice. When not overflowing, it looks out of place. I have put the bottom-border on the table, when overflowing, it will obviously not show. I don't have any experience with JavaScript/Jquery/etc. and have tried to only use CSS for this so far.
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
Better observable here, because the result screen can be resized:
https://jsfiddle.net/s43yuebt/2/
Can I achieve what I want by only using CSS?
use max-height on #table_wrapper
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#container {
width: 100%;
height: 0 auto;
overflow: auto;
}
#table_wrapper {
border-bottom: 1px solid #5C6F8C;
float: none;
overflow: auto;
max-height: 80vh;
width: 80%;
}
#test_table {
border-collapse: separate;
border-spacing: 0;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: calc(8px + 0.3vw);
text-align: center;
width: 100%;
/*border-bottom: 1px solid #5C6F8C;*/
}
#top_header {
border: 2px solid #5C6F8C;
border-right: 0px;
background-color: #ADBEDA;
}
caption {
background-color:white;
}
td, th {
border: 1px solid #5C6F8C;
border-right: 0px;
border-bottom: 0px;
padding: 5px 10px;
text-align: left;
}
tbody > tr:first-child > td {
border-top: 0px;
}
tbody > tr:first-child > th {
border-top: 0px;
}
th {
background-color: #ADBEDA;
}
tr:nth-child(even) {
background-color: #CFDDF5;
}
tr:nth-child(odd) {
background-color: #E3ECFD;
}
tr:hover {
background-color: #F0F5FF;
text-shadow:0px 0px 0.25px black;
}
<div id="container">
<div id="table_wrapper">
<table id="test_table">
<thead>
<th id="top_header">No.</th>
<th id="top_header">asdad.</th>
<th id="top_header">asdad</th>
</thead>
<tbody>
<tr><th>1</th><td>asdad</td><td>asdad</td></tr>
<tr><th>2</th><td>asdad</td><td>asdad</td></tr>
<tr><th>3</th><td>asdad</td><td>asdad</td></tr>
<tr><th>4</th><td>asdad</td><td>asdad</td></tr>
<tr><th>5</th><td>asdad</td><td>asdad</td></tr>
<tr><th>6</th><td>asdad</td><td>asdad</td></tr>
<tr><th>7</th><td>asdad</td><td>asdad</td></tr>
<tr><th>8</th><td>asdad</td><td>asdad</td></tr>
<tr><th>9</th><td>asdad</td><td>asdad</td></tr>
<tr><th>10</th><td>asdad</td><td>asdad</td></tr>
</tbody>
</table>
</div>
</div>
I have some borders of style double, while some borders of style solid according to my precedence requirements. These styles are for different colors of border of <td> in my table.
This is an example table:
table {
border-collapse: collapse;
width: 100%;
border-bottom: 1px double #000;
}
td {
border: 1px double #dddddd;
text-align: left;
padding: 8px;
}
tr:first-child td {
border-top: none;
}
tr:last-child td {
border-bottom: none;
}
td:first-child {
border-left: none;
}
td:last-child {
border-right: none;
}
<table>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
My problem is that the bottom border of table is not showing completely. Note that I can't change style from double to solid for given <td> because I am already using them for other td classes (see EDIT).
EDIT
The rowspan can be any number.
Here is the complete SCSS file:
$dark-black-grey: #212121;
$black-grey: #616161;
$dark-grey: #bdbdbd;
$medium-grey: #e0e0e0;
$light-grey: #eeeeee;
$blue-grey: #b0bec5;
$light-blue-grey: #cfd8dc;
$white-grey: #fafafa;
$blue: #64b5f6;
$light-blue: #90caf9;
$white-blue: #bbdefb;
$green: #81c784;
$red: #e57373;
$light-red: #ef9a9a;
$white-red: #ffcdd2;
$light-yellow: #fffde7;
$font-size: 14px;
$header-height: 30px;
#data-wrapper {
display: grid;
grid-template-columns: 1fr 2fr 4fr;
div {
height: 100vh;
&:not(:last-child) {
border-right: 1px double $dark-grey;
}
div.table-wrapper {
height: calc(100% - #{$header-height});
overflow-x: hidden;
overflow-y: auto;
table {
width: 100%;
border-bottom: 1px double $dark-grey;
tr {
&:first-child {
td {
border-top: 0;
}
}
&:last-child {
td {
border-bottom: 0;
}
}
td {
border: 1px double $light-grey;
padding: 4px 8px;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
&.fade {
color: $black-grey;
}
&.footer {
text-align: right;
font-weight: 500;
}
&:not(.warning):not(.info) {
&.computed {
background-color: $light-yellow;
}
&.optional {
background-color: #ffeeff;
}
&.input-box {
background-color: $white-grey;
&:hover {
background-color: $light-grey
}
}
}
&.warning {
background-color: $light-red;
input {
background-color: $light-red;
}
&:not(.button) {
border-style: solid;
border-color: $light-red;
}
&.button {
background-color: $white-grey;
&:hover {
background-color: $white-red;
border-style: solid;
border-color: $white-red;
}
&:active {
background-color: $light-red;
border-style: solid;
border-color: $light-red;
}
}
}
&.info {
background-color: $light-blue;
input {
background-color: $light-blue;
}
&:not(.button) {
border-style: solid;
border-color: $light-blue;
}
&.button {
text-align: center;
font-weight: 500;
background-color: $white-grey;
&:hover {
background-color: $white-blue;
border-style: solid;
border-color: $white-blue;
}
&:active {
background-color: $light-blue;
border-style: solid;
border-color: $light-blue;
}
}
}
&.button {
cursor: pointer;
padding: 4px;
}
}
}
}
}
table {
border-collapse: collapse;
&.popup {
position: absolute;
box-shadow: 2px 2px 4px 1px $black-grey;
td {
background-color: white;
padding: 4px 8px;
cursor: pointer;
&:hover {
background-color: $light-grey;
}
&:active {
background-color: $medium-grey;
}
}
}
&.header {
width: 100%;
border-bottom: 1px double $dark-grey;
height: $header-height;
tr td {
text-align: center;
font-weight: 500;
padding: 0 4px;
&.fade {
color: $black-grey;
}
&.button {
cursor: pointer;
&:hover:not(:active) {
background-color: $light-grey;
}
&:active {
background-color: $medium-grey;
}
}
}
}
}
}
}
svg {
display: block;
margin: auto;
width: $font-size;
height: $font-size;
}
input {
border: none;
padding: 0;
width: 100%;
&:hover {
box-shadow: 0 0 1px 1px $blue
}
&:focus {
outline: none;
box-shadow: 0 0 1px 1px $green;
&.invalid {
box-shadow: 0 0 1px 1px $red
}
}
}
td.shrink {
width: 1%;
white-space: nowrap;
}
Does this help?
table {
border-collapse: collapse;
width: 100%;
border-bottom: 1px double #000;
}
td {
border: 1px double #dddddd;
text-align: left;
padding: 8px;
}
tr:first-child td {
border-top: none;
}
tr:last-child td {
border-bottom: none;
}
td:first-child {
border-left: none;
}
td:last-child {
border-right: none;
}
td[rowspan="2"] {
border-bottom: 1px double #000;
}
<table>
<tr>
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
PLEASE NOTE: If this does not help you we need 2 more things from you.
All of your CSS / HTML code, not just a snippet
To know if you are willing to use JavaScript or JQuery to solve your issue
See the fiddle: JSFiddle
add the below css
td[rowspan="2"] {
border-bottom: 1px double #000;
}
This is pure CSS solution. Not sure if it works for all cases because of the precedence among other <td> with solid borders, but didn't find any such cases till now.
td[rowspan]:not([rowspan="1"]) {
border-bottom-style: solid;
}
I am having a trouble with changing a top left corner cell of a table.
I have this table:
<table>
<caption>zľavové hodiny</caption>
<tr>
<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
and I have to change the background-color in top left corner cell of table. It should have background-color #CCCCCC and shouldn't have border 5px on right side (only 1px as other sides). Everything else should remain as it is now. Any ideas what to do?
This is my CSS code:
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr th:nth-child(1) {
background-color: plum;
border-right-width: 5px;
}
You can use tr:first-child th:first-child selector to get/reach top-left cell.
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr:first-child th:first-child {
background-color: #CCCCCC;
/* add what you want */
}
<table>
<caption>zľavové hodiny</caption>
<tr>
<th>zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
Just add a class (blank) to the th and define (border: none; background-color:#fff !important;) in the css
table {
border: 5px double #999;
background-color: white;
border-spacing: 5px 1em;
empty-cells: hide;
margin-left: auto;
margin-right: auto;
}
table th, table td {
border: 1px solid black;
padding: 0.5em;
border-collapse: collapse;
}
table tr:nth-child(1) {
background-color: gold;
}
table th:nth-child(2) {
border-bottom-width: 5px;
}
table th:nth-child(3) {
border-bottom-width: 5px;
}
table th:nth-child(4) {
border-bottom-width: 5px;
}
table th:nth-child(5) {
border-bottom-width: 5px;
}
table th:nth-child(6) {
border-bottom-width: 5px;
}
table tr:nth-child(odd) {
background-color: orangered;
}
table tr:nth-child(1) {
background-color: gold;
}
tr th:nth-child(1) {
background-color: plum;
border-right-width: 5px;
}
.blank
{
border:none;
background-color:#fff !important;
}
<table>
<caption>zľavové hodiny</caption>
<tr>
<th class="blank">zač./deň</th><th>pondelok</th><th>utorok</th><th>streda</th><th>štvrtok</th><th>piatok</th>
</tr>
<tr>
<th>10:00</th>
<td></td>
<td></td>
<td colspan="3">práčky, sušičky (-20%)</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="2">mikrovlnné rúry (-25%)</td>
<td></td>
<td>vysávače (-30%)</td>
<td></td>
</tr>
</table>
Maybe in your css you could do the following:
table tr:nth-child(1) th:nth-child(1){
background:#CCC;
border:1px 5px 1px 1px;
border-style: solid;
border-color: #the color;
}
Hope it helps.
Consider the following setup:
$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world, how are you today</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things</td>
<td>Cow level is real!!1111</td>
<td>over 9000%</td>
</tr>
</tbody>
</table>
</div>
As you can see, the highlighted table shows ugly "arrows" from the borders upon hover:
How can I get rid of those?
Here, try this.. the larger the border is, the more pronounced the angle is. I changed the border size to 0px
fiddle: https://jsfiddle.net/uqdebsxp/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
css
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
You'll need to manually remove borders on hovered items in a columns, using this CSS:
$(function() {
var $cols = $("td:nth-child(2), th:nth-child(2)");
$cols.hover(function() {
$cols.addClass("highlight");
}, function() {
$cols.removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: auto;
border-collapse: separate;
border-spacing: 0;
}
td {
padding: 10px;
background-color: #fff;
border: 1px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
th {
border: 1px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
/* New CSS */
tbody tr:first-child > td.highlight {
border-bottom: 1px solid black;
border-top: 1px solid black;
}
tr:last-child td.highlight {
border-bottom-color: black;
border-top: 1px solid;
}
th.highlight {
border-top: 10px solid black;
border-bottom: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Important</th>
<th>Information</th>
<th>Interchange</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hello world</td>
<td>again</td>
<td>and we're done</td>
</tr>
<tr>
<td>More things to come</td>
<td>over 9000%</td>
<td>Cow level is real!</td>
</tr>
</tbody>
</table>
</div>
Thanks for all the good answers. Being me, I was not satisfied with "it doesn't work" and found a way with only very small adjustments, see below.
$(function() {
var $cols = $("table [data-col]");
$cols.hover(function() {
var colNum = $(this).data("col");
$("[data-col=" + colNum + "]").addClass("highlight");
}, function() {
var colNum = $(this).data("col");
$("[data-col=" + colNum + "]").removeClass("highlight");
});
});
div {
background: #edf0f1;
padding: 20px;
}
table {
table-layout: fixed;
width: 500px;
border-collapse: separate;
border-spacing: 0;
}
td {
vertical-align: top;
padding: 0;
background-color: #fff;
border: 0px solid #edf0f1;
border-right-width: 10px;
border-left-width: 10px;
}
td > div, th > div {
padding: 10px;
border-top: 1px solid #edf0f1;
background: none;
}
td.highlight,
th.highlight {
border-right-color: black;
border-left-color: black;
}
tr:last-child td {
border-bottom-width: 10px;
}
tr:last-child td.highlight {
border-bottom-color: black;
}
th {
border: 0px solid #edf0f1;
border-top-width: 10px;
border-right-width: 10px;
border-left-width: 10px;
}
th.highlight {
border-top: 10px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th data-col="1"><div>Important</div></th>
<th data-col="2"><div>Information</div></th>
<th data-col="3"><div>Interchange</div></th>
</tr>
</thead>
<tbody>
<tr>
<td data-col="1"><div>Hello world, how are you today</div></td>
<td data-col="2"><div>again</div></td>
<td data-col="3"><div>and we're done</div></td>
</tr>
<tr>
<td data-col="1"><div>More things</div></td>
<td data-col="2"><div>Cow level is real!!1111</div></td>
<td data-col="3"><div>over 9000%</div></td>
</tr>
</tbody>
</table>
</div>
All that was needed is to wrap the contents into a div and tweak the CSS a little.
This way, I keep the properties of the table (including dynamic row height) but can still highlight per column. Hope it helps someone.