I'm trying to style a table using only SASS/CSS. I've set the width of my table to be 100%. However, when I set the font-size of the th element to 0.8em, My table fails to take all of the width it's allowed (Notice that the columns do not reach the border line on the right). How can I fix this using CSS, given that I don't control the HTML?
SASS/CSS
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
display: block;
overflow: auto;
width: 100%;
thead {
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
}
tbody {
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
}
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
Here is what I think you want, I just removed border-collapse, display:block (this make the table default CSS), here is a codepen with SCSS and a working snippet is here too:
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: separte;
border-spacing: 0;
display: table;
overflow: auto;
width: 100%;
}
table thead th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
table thead th:first-child {
border-top-left-radius: 5px;
}
table thead th:last-child {
border-top-right-radius: 5px;
}
table tbody td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
table tbody tr:nth-child(2n) {
background-color: lightgray;
}
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
remove display:block from table
#container,tr{
width:100%;
}
html,body{
width:100%;
}
#container{
border-radius:15px;
background-color:black;
}
table {
color: black;
background-color: white;
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
border-radius: 5px;
border-collapse: collapse;
border-spacing: 0;
overflow: auto;
width: 98%;
margin:0 auto;
}
th {
color: white;
background-color: black;
font-weight: bold;
font-size: 0.8em;
padding: 5px 10px;
vertical-align: bottom;
}
th:first-child {
border-top-left-radius: 5px;
}
th:last-child {
border-top-right-radius: 5px;
}
td {
border-top: 1px solid gray;
padding: 5px 10px;
vertical-align: top;
}
tr:nth-child(2n) {
background-color: lightgray;
}
<html>
<body>
<div id='container'>
<table>
<thead>
<tr>
<th>Method</th>
<th>Runtime</th>
<th align="right">Mean</th>
<th align="right">Ratio</th>
<th align="right">Gen 0/1k Op</th>
<th align="right">Allocated Memory/Op</th>
</tr>
</thead>
<tbody>
<tr>
<td>Baseline</td>
<td>Clr</td>
<td align="right">1.833 us</td>
<td align="right">1.00</td>
<td align="right">2.0542</td>
<td align="right">6.31 KB</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
I've tried all the solutions I can find but the closest I can get to a uniform row height is editing the height of my table headers, the table data rows won't change their height, no matter what I change.
My HTML:
<div class="fields">
<table>
<tr>
<th>Year</th>
<th id="clickable" onclick="openPopup('f2')">Yield/Year</th>
<th id="clickable" onclick="openPopup('f3')">Yield/Year*3</th>
<th id="clickable" onclick="openPopup('f4')">Yield/Year*3*4</th>
</tr>
<tr>
<td>1</td>
<td>387.58</td>
<td>1162.74</td>
<td>4650.96</td>
</tr>
</table>
</div>
My CSS:
.fields table {
width: auto;
table-layout: fixed;
border-collapse: collapse;
white-space: nowrap;
}
.fields td {
font-family: Arial, sans-serif;
color: #213B54;
font-size: 16px;
border-right: 2px solid #213B54;
border-bottom: 2px solid #213B54;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
.fields th {
font-family: Arial, sans-serif;
font-size: 16px;
border-right: 2px solid #213B54;
border-bottom: 2px solid #213B54;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
background-color: #9bdcdf;
color: #067A9F;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
height: 10px;
}
All you should have to do is write a style that targets tr, optionally with classes to differentiate between your header and data rows.
EDIT: By the way, I just noticed that you have the same ID on multiple elements. IDs should uniquely identify a single element. To apply styles to multiple elements, you should use classes.
table {
width: auto;
table-layout: fixed;
border-collapse: collapse;
white-space: nowrap;
}
td {
font-family: Arial, sans-serif;
color: #213B54;
font-size: 16px;
border-right: 2px solid #213B54;
border-bottom: 2px solid #213B54;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
}
th {
font-family: Arial, sans-serif;
font-size: 16px;
border-right: 2px solid #213B54;
border-bottom: 2px solid #213B54;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
text-align: center;
background-color: #9bdcdf;
color: #067A9F;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
height: 10px;
}
tr.table-header {
height: 50px;
}
tr.table-data {
height: 100px;
}
<table>
<tr class="table-header">
<th>Year</th>
<th id="clickable" onclick="openPopup('f2')">Yield/Year</th>
<th id="clickable" onclick="openPopup('f3')">Yield/Year*3</th>
<th id="clickable" onclick="openPopup('f4')">Yield/Year*3*4</th>
</tr>
<tr class="table-data">
<td>1</td>
<td>387.58</td>
<td>1162.74</td>
<td>4650.96</td>
</tr>
</table>
My table with rowgroups.
How can I show only the inner borders for the rowgroup?
At the moment the table shows no left/right/top border as wanted, but I don't know how I can select the last row of the rowgroup.
Borders that aren't needed:
div {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
}
table {
table-layout: fixed;
}
table.dataTable,
table.dataTable th,
table.dataTable td {
box-sizing: border-box ! important;
}
.tg {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
border: none ! important;
border-collapse: collapse;
border-color: #ccc;
border-spacing: 0;
}
.tg td,
th {
border-color: #ccc;
border-style: solid;
border-width: 1px ! important;
color: #333;
padding: 10px 5px;
word-break: normal;
}
.tg tr td:first-child,
th:first-child {
border-left: none ! important;
}
.tg tr td:last-child,
th:last-child {
border-right: none ! important;
}
.tg tr td,
th {
border-right: none ! important;
border-top: none ! important;
}
.tg tr th {
border-bottom: none ! important;
}
.tg thead tr:last-child th {
border-bottom: 1px solid ! important;
}
.tg .header-left {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: left;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .header-center {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: center;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .header-right {
background-color: #c0c0c0;
border-color: inherit;
font-size: large;
font-weight: bold;
text-align: right;
top: 0;
vertical-align: top;
will-change: transform;
}
.tg .cell-left {
border-color: inherit;
text-align: left;
vertical-align: middle;
}
.tg .cell-center {
border-color: inherit;
text-align: center;
vertical-align: middle;
}
.tg .cell-right {
border-color: inherit;
text-align: right;
vertical-align: middle;
}
<div class="container">
<table class="tg wrap stripe" id="tableData">
<thead>
<tr>
<th class="header-left">Name</th>
<th class="header-left">Position</th>
<th class="header-center">Age</th>
<th class="header-center">Start date</th>
<th class="header-right">Salary</th>
<th class="header-">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-left">Airi Satou</td>
<td class="cell-left">Accountant</td>
<td class="cell-center">33</td>
<td class="cell-center">28-Nov-2008</td>
<td class="cell-right">$162,700</td>
<td>Tokyo</td>
</tr>
<tr>
<td class="cell-left">Angelica Ramos</td>
<td class="cell-left">Chief Executive Officer (CEO)</td>
<td class="cell-center">47</td>
<td class="cell-center">09-Oct-2009</td>
<td class="cell-right">$1,200,000</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
The following selector is what I would use:
.table tr:last-child th,
.table tr:last-child td{
border-bottom: none;
}
This is much easier to get the first row after row group:
table tr.dtrg-group + tr td {
border-top: none ! important;
}
The following CSS rule should remove your unwanted border:
tr:last-child td {
border-bottom: none;
}
Below is a refactored version of your CSS. Less is ALWAYS more, don't set properties to their default values, i.e. font-weight: normal is useless because font weight is already normal, just remove it, unclutter your CSS. Don't border-color: inherit if you're not drawing a border etc.
.container {
font-family: Lato, sans-serif;
font-size: 0.875rem;
}
.tg {
all: unset;
table-layout: fixed;
border-collapse: collapse;
border-color: #ccc;
border-spacing: 0;
}
td,
th {
border-left: 1px solid #ccc;
color: #333;
padding: 0.5em 0.2em;
}
td {
border-bottom: 1px solid #ccc;
}
th {
background-color: #c0c0c0;
font-size: large;
font-weight: bold;
}
.header-left,
.cell-left {
text-align: left;
}
.header-center,
.cell-center {
text-align: center;
}
.header-right,
.cell-right {
text-align: right;
}
td:first-child,
th:first-child {
border-left: none;
}
tr:last-child td {
border-bottom: none;
}
<div class="container">
<table class="tg wrap stripe" id="tableData">
<thead>
<tr>
<th class="header-left">Name</th>
<th class="header-left">Position</th>
<th class="header-center">Age</th>
<th class="header-center">Start date</th>
<th class="header-right">Salary</th>
<th class="header-">Office</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell-left">Airi Satou</td>
<td class="cell-left">Accountant</td>
<td class="cell-center">33</td>
<td class="cell-center">28-Nov-2008</td>
<td class="cell-right">$162,700</td>
<td>Tokyo</td>
</tr>
<tr>
<td class="cell-left">Angelica Ramos</td>
<td class="cell-left">Chief Executive Officer (CEO)</td>
<td class="cell-center">47</td>
<td class="cell-center">09-Oct-2009</td>
<td class="cell-right">$1,200,000</td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
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.
I want to get rid of the horizontal line in the middle. Basically, I want the table to have the outer borders and a vertical divider in the middle. How do I achieve this?
JS Fiddle - https://jsfiddle.net/kac69ovn/
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>
Thanks in advance!
Keep the full border on your table, but stick to border-left and border-right for your th and td elements.
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th, td {
text-align: left;
width: 50%;
border-right: 1px solid black;
border-left: 1px solid black;
padding: 5px 11px;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>
You can fiddle with the borders:
Set border-top: none for the tds
Set border-bottom: none for the th
Add this to prevent horizontal line when there are multiple trs:
tr:not(:last-child) td {
border-bottom: none;
}
See demo below:
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
/*border: 1px solid black;*/
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
border-bottom: none; /* ADDED */
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
border-top: none; /* ADDED */
padding: 5px 11px;
}
tr:not(:last-child) td { /* ADDED */
border-bottom: none;
}
<table>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text of the printing and </td>
<td>It is a long established fact that a </td>
</tr>
</tbody>
</table>
th, td {border: none; border-right: 1px solid black;}
I think this is what your looking for:
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
border-bottom: None;
}
td {
text-align: left;
width: 50%;
border: 1px solid black;
padding: 5px 11px;
border-top: None;
}
updated
https://jsfiddle.net/kac69ovn/1/
table {
width: 85%;
border-collapse: collapse;
margin-left: 4%;
border: 1px solid black;
}
th {
text-align: left;
width: 50%;
border-right: 1px solid black;
padding: 5px 11px;
}
td {
text-align: left;
width: 50%;
border-right: 1px solid black;
padding: 5px 11px;
}
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.