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!
Related
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>
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>
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 trying to create a pure-CSS popover à la Bootstrap/Popper.js.
The code here works fine, as long as the parent .wrapper element remains larger than the .popover element--the popover is centered. However, if you shrink the screen enough that the table inside the popover keeps the .popover larger than the parent, things start scooching to the right and the triangle is no longer centered. Is it possible to keep an absolutely-positioned child centered when its parent is smaller than it?
Bonus question--how do I get the ::after triangle z-indexed behind the parent .popover div so its shadow doesn't show up like it does now?
.container {
width: 80%;
margin: auto;
}
.container>table {
width: 40%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 8px;
}
.text-center {
text-align: center;
}
.wrapper {
/* webkit flicker fix */
-webkit-transform: translateZ(0);
/* webkit text rendering fix */
-webkit-font-smoothing: antialiased;
}
.wrapper .popover {
background: #FFF;
border: 4px solid #EEE;
border-radius: 3px;
font-size: 80%;
font-family: monospace;
bottom: 100%;
left: 50%;
margin-left: -50%;
display: block;
margin-bottom: 5px;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(10px);
transition: all .25s ease-out;
box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .popover:before {
bottom: -20px;
content: "";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.wrapper .popover:after {
content: "";
display: block;
position: absolute;
width: 15px;
height: 15px;
left: 50%;
bottom: -11.07106781187px;
margin-left: -7.07106781187px;
background: #EEE;
border-right: 4px solid #EEE;
border-bottom: 4px solid #EEE;
border-radius: 3px;
transform: rotate(45deg);
z-index: -1;
box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}
.wrapper:hover .popover {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.wrapper .popover table,
.wrapper .popover th,
.wrapper .popover td {
border: none;
}
.wrapper .popover table {
text-transform: uppercase;
text-align: left;
}
.wrapper .popover td {
padding: 5px;
}
.wrapper .popover td:nth-child(1) {
font-weight: bold;
text-align: right;
}
.wrapper .popover tr:nth-child(even) {
background: #EEE;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Popover</title>
</head>
<body>
<div class="container">
<h1>Need Some Space for the Popup to Stay On Screen</h1>
<h2>Filling More Vertical Space</h2>
<table>
<thead>
<tr>
<th>Some</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>More</td>
<td>Data</td>
</tr>
<tr>
<td class="wrapper text-center">
<i>Popup!</i>
<div class="popover">
<table>
<tbody>
<tr>
<td>Complete</td>
<td>70%</td>
</tr>
<tr>
<td>Noise</td>
<td>blorp</td>
</tr>
<tr>
<td>Status</td>
<td>magical</td>
</tr>
<tr>
<td>UUID</td>
<td>FCC15A57-440F-40F6-A7E5-BF708838028F</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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;
}