Select parent of empty elements using Sass or CSS - html

I've tried several combinations to try and select a parent row but nothing seems to work. Maybe it is not possible. If someone could help explain how to achieve this through either css or sass it would be much appreciated.
The goal is to add a gray background to a row, , if that row contains an empty column, .
I've tried some variations of the following:
tr > td:empty {
background-color: #f3f3f3;
}
Example
<table>
<thead></thead>
<tbody>
<tr>
<td>No</td>
<td>empty</td>
<td>cells</td>
<td>here</td>
</tr>
<tr>
<td>Does</td>
<td>have</td>
<td>empty</td>
<td>cell</td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

There is not such selector to do this but you can simulate the effect using a pseudo element:
table {
overflow: hidden;
position: relative;
z-index: 0;
}
tr>td:empty {
position: relative;
}
tr>td:empty::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -50vw;
right: -50vw;
bottom: 0;
background-color: #f3f3f3;
}
<table>
<thead></thead>
<tbody>
<tr>
<td>No</td>
<td>empty</td>
<td>cells</td>
<td>here</td>
</tr>
<tr>
<td>Does</td>
<td>have</td>
<td>empty</td>
<td>cell</td>
<td></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
<td>empty</td>
<td>cells</td>
<td></td>
<td>here</td>
</tr>
<tr>
<td>Does</td>
<td>have</td>
<td></td>
<td>empty</td>
<td>cell</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>

Related

How can I overlap a table row over another?

This is just taking the content width and what I need is the entire "Overlap this" row to move on top of the previous row and using the width of its predecessor. Any hint on how to solve this?
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block, width: 100%; margin-top: -25px">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
Style the table data <td> tag, instead of the table row <tr>. Check the code below.
<table>
<tbody>
<tr style="background: azure; position: absolute; display: block;">
<td colspan="3" style="width: 150px;">Overlap this</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
table tbody {
position: relative;
}
table tbody tr:nth-child(2) {
background: azure;
position: absolute;
display: block;
width: 100%;
margin-top: -25px;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
tbody {
width: 100%;
}
tr {
width: inherit;
}
<table>
<tbody style="position:relative">
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block; top:0 ">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>
In your style list you have a small mistake. Instead , you need semicolon ; after: ...display: block, <-- small bug :-) ...
<tr style="background: azure; position: absolute; display: block; width: 100%; margin-top: -25px">
.ovl {
background: azure;
position: absolute;
display: block;
width: 100%; margin-top: -25px
}
tbody {
position: relative;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value33</td>
</tr>
<tr class="ovl">
<td colspan="3" >Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

HTML-CSS- Table rows not working as expected

This is my code:
.MainTable {
width: 100%;
height: 100%;
}
.SecondRow {
background-color: blue;
height: 100%;
width: 100%;
}
.TopRow {
background-color: green;
height: 25px;
width: 100%;
}
<table class="MainTable">
<tr class="TopRow">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="SecondRow">
<td class="Tags"></td>
<td>
<table class="ContentTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="Stats"></td>
</tr>
</table>
As you can see the second row is not extending to its full extent. And why are the tds not equally spaced?
I want the second row to occupy the full width and 100% height too. But as you can see, only some of it is showing. The second row is not occupying the full width and height. What am I doing wrong?
You can use the colspan="2" attribute on the <td>
.MainTable {
width: 100%;
height: 100%;
}
.SecondRow {
background-color: blue;
height: calc(100vh - 25px);
width: 100%;
}
.TopRow {
background-color: green;
height: 25px;
width: 100%;
}
<table class="MainTable">
<tr class="TopRow">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="SecondRow">
<td class="Tags" colspan="3"></td>
<td colspan="1">
<table class="ContentTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="Stats"></td>
</tr>
</table>

How can i achieve a table like this?

I tried using boxed elements but it is not coming in a proper way!
Any kind of help is highly appreciated
https://codepen.io/saisree/pen/EXXQGO - link to codepen
<table>
<tr>
<td class="text-center" colspan="4">Aircraft Status Display</td>
</tr>
<tr>
<td> spare</br>STBY</td><td><div class="vr"></div>
</td>
</tr>
<tr>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
</table>
Using colspan=n to make a column the width of n columns:
<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
It's not completely clear from your image what you are trying to achieve, but if you mean the "half-open" cells, here is an example.
It uses col-spans to merge several cells into one, and different border settings: First a default setting for all cells (for borders on each side), the therse are overwritten by additional CSS rules that have special CSS selectors (with pseudo classes) to only affect certain cells:
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #333;
height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

CSS - create table with fixed size and custom column sizes

I have created these CSS classes:
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
And this table:
<table class="table-c">
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table is fixed size as I wanted, but I also need to have different columns have different width. Those columns should not change with and always have it fixed. And also rows height should be fixed.
As in this example:
Here is my try:
http://jsfiddle.net/cbafseq6/
As you can see all columns have same width and all rows same height. If I would try for example set height on specific tr element (like style="height: 20px") all rows would still have same height.
If you want every row to have specific height and every column to have specific width, you can do something like the code below. I used your own code. You can tell me if that helps.
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
<table class="table-c">
<tr>
<td style="width: 10%">REFERENCE NO.</td>
<td style="width: 30%">DESCRIPTION</td>
<td style="width: 10%">Invoice DATE</td>
<td style="width: 10%">INVOICE AMOUNT</td>
<td style="width: 20%">DISCOUNT TAKEN</td>
<td style="width: 20%">AMOUNT PAID</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table-c">
<tr>
<td style="width: 20%">CHECK DATA</td>
<td style="width: 10%">CHECK NO.</td>
<td style="width: 40%">PAYEE</td>
<td style="width: 10%">DISCOUNT TAKEN</td>
<td style="width: 20%">CHECK AMOUNT</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Not sure the table element is what you want to go with.
Custom width of cells within columns would be available by using multiple tables (one for each row), perhaps, but a single table cannot have columns change width every row.
Maybe try a div layout.
Regarding the height set on tr - you chose a height too small, so there is no effect, a larger value would make the row larger. Again, because of table display settings this works differently and you should probably look for a different layout option.
Just use 2 tables:
table {
border: solid black;
border-width: 0 1px;
width: 100%;
height: 30px;
table-layout: fixed;
border-spacing: 2px;
margin-top: -2px; /* same value as border-spacing */
}
td {
border: 1px solid black;
padding: 10px;
}
table:first-child {
border-top-width: 1px;
margin-top: 0;
}
table:last-child {
border-bottom-width: 1px;
}
<div>
<table>
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Honestly, even though tables are meant to display tabular data, I would go with a div layout here.
You can easily do this with a wrapper and some floated div and then you can do any and all customization you like to any of the "cells". Just my .02

Semantic UI - Keep thead visible when scrolling tbody

I'm trying to figure out how to keep the table head visible when scrolling. Is there a setting in semantic ui for this? Or will I just have to use a non-semantic ui solution?
You'll need to view "Full page" to see the table correctly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />
<div style="height:200px;overflow:auto">
<table class="ui small celled striped table" sytle="width:100%">
<thead>
<tr>
<th>Date</th>
<th>Status</th>
<th>Facility Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody data-bind="foreach:FollowupEntries">
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
<tr>
<td>Date</td>
<td>Status</td>
<td>Facility Name</td>
<td>Phone</td>
</tr>
</tbody>
</table>
</div>
I solved the problem with position: sticky, like this:
.ui.table thead tr:first-child > th {
position: sticky !important;
top: 0;
z-index: 2;
}
As #Stewartside suggested, this isn't current built into Semantic UI, but it has been discussed.
Though I don't recommend it if you really really want it to work even with hacks this should work for you:
<table class="semantic's class" style="margin-bottom:0px;border-bottom:none">
<thead>...</thead>
</table>
<table class="semantic's class" style="margin-top:0px; border-top: none">
<div style="overflow-y:scroll; height: YOUR-REQUIRED-HEIGHT">
<thead style="visible:hidden">...</thead>
<tbody>...</tbody>
</div>
</table>
This script will probably do the job for you. Just add the class "sticky" to your table tag and adjust the offset from the top:
$(document).ready(function(){
var tableTop = $('.sticky.table').offset().top;
$('.sticky.table').children('thead').children('tr').children('th').each( function() {
$(this).css({ width: $(this).outerWidth() });
});
$(window).scroll(function() {
var fromTop = $(window).scrollTop();
if($('.sticky.table').length > 0){
stickyTableHead(fromTop);
}
});
function stickyTableHead(fromTop){
if(fromTop > tableTop ){
$('.sticky.table').children('thead').css({'position': 'fixed', top: 0 });
}else{
$('.sticky.table').children('thead').css({'position': 'relative', top: 0});
}
};
});
Applying Ashkan's solution to any table.
table{
width:100%;
}
table,th,td{
border: 1px solid grey;
border-collapse: collapse;
}
thead {
background-color: grey;
position: sticky !important;
top: 0;
z-index: 2;
}
<div style="overflow: auto; height:100px;">
<table>
<thead>
<tr>
<th>ID</th>
<th>ONE</th>
<th>TWO</th>
<th>THREE</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>2</td><td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>3</td><td>G</td><td>H</td><td>I</td>
</tr>
<tr>
<td>4</td><td>J</td><td>K</td><td>L</td>
</tr>
<tr>
<td>5</td><td>M</td><td>N</td><td>O</td>
</tr>
<tr>
<td>6</td><td>P</td><td>Q</td><td>R</td>
</tr>
<tr>
<td>7</td><td>S</td><td>T</td><td>U</td>
</tr>
<tr>
<td>8</td><td>V</td><td>W</td><td>X</td>
</tr>
<tr>
<td>9</td><td>Y</td><td>Z</td><td>0</td>
</tr>
</tbody>
</table>
</div>
Check out this JSFiddle, I think it is the kind of thing you're looking for.. specifically check out the CSS for the thead tag.
thead {
position: fixed;
top: 0;
left: 0;
background-color: white;
}