Is it possible with HTML/CSS to create a table with three columns, where one row has only two cells. However, instead of one cell of that row being 66% (colspan="2") and the other being 33%, both to be 50% (so errh, colspan="1.5" which doesn't work as expected)
To illustrate what I mean:
What I am talking about is the row which is in bold red, is this possible?
Sure, just like the following:
table,
td {
border: 1px solid #999;
}
td {
height: 20px;
width: 50px;
}
<table>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>
table,
td {
border: 1px solid #999;
}
td {
height: 20px;
width: 50px;
}
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 days ago.
This post was edited and submitted for review 9 days ago.
Improve this question
I have 2 columns one is complete and the second one includes missing values as NULL
Like this
table, th, td {
border: 0.4px solid black;
}
table {
width: 50%;
}
th {
height: 30px;
}
<table>
<tr>
<th>column1</th>
<th> column2</th>
</tr>
<tr>
<td>late fee</td>
<td> X</td>
</tr>
<tr>
<td>billing disbute</td>
<td> Y</td>
</tr>
<tr>
<td>transiction issue</td>
<td> NULL</td>
</tr>
<tr>
<td>late fee</td>
<td>NULL</td>
</tr>
<tr>
<td>billing disbute</td>
<td>Y</td>
</tr>
<tr>
<td>transiction issue</td>
<td>X</td>
</tr>
<tr>
<td>billing disbute</td>
<td>NULL</td>
</tr>
<tr>
<td>late fee</td>
<td>X</td>
</tr>
</table>
I checked and each distinct value of column1 has either X or Y in column2
So my approach was to create a table include distinct values of column1 and column2 excluding NULLs
AS in this query
SELECT DISTINCT coulmn1, column2
FROM db
WHERE column2 IS NOT NULL
table, th, td {
border: 0.4px solid black;
}
table {
width: 50%;
}
th {
height: 30px;
}
<table>
<tr>
<th>column1</th>
<th> column2</th>
</tr>
<tr>
<td>billing disbute</td>
<td>Y</td>
</tr>
<tr>
<td>transiction issue</td>
<td>X</td>
</tr>
<tr>
<td>late fee</td>
<td>X</td>
</tr>
</table>
THEN use REPLACE function nested in a CASE expression with 2 conditions
This is the query I used
WITH t2 AS (
SELECT DISTINCT coulmn1, column2
FROM db
WHERE column2 IS NOT NULL )
SELECT db.column1,
CASE WHEN db.column2 IS NULL AND db.column1 = t1.column1
THEN REPLACE ('column2', 'NULL', 't2.column2') END
FROM db, t2
And I was expecting something like this table with no NULL
table, th, td {
border: 0.4px solid black;
}
table {
width: 50%;
}
th {
height: 30px;
}
<table>
<tr>
<th>column1</th>
<th> column2</th>
</tr>
<tr>
<td>late fee</td>
<td> X</td>
</tr>
<tr>
<td>billing disbute</td>
<td> Y</td>
</tr>
<tr>
<td>transiction issue</td>
<td> X</td>
</tr>
<tr>
<td>late fee</td>
<td>X</td>
</tr>
<tr>
<td>billing disbute</td>
<td>Y</td>
</tr>
<tr>
<td>transiction issue</td>
<td>X</td>
</tr>
<tr>
<td>billing disbute</td>
<td>Y</td>
</tr>
<tr>
<td>late fee</td>
<td>X</td>
</tr>
</table>
The issue is this query replaced all values in column2 to NULLs
which the complete opposite of what it supposed to do
and the output was like this instead
table, th, td {
border: 0.4px solid black;
}
table {
width: 50%;
}
th {
height: 30px;
}
<table>
<tr>
<th>column1</th>
<th> column2</th>
</tr>
<tr>
<td>late fee</td>
<td>NULL</td>
</tr>
<tr>
<td>billing disbute</td>
<td>NULL</td>
</tr>
<tr>
<td>transiction issue</td>
<td> NULL</td>
</tr>
<tr>
<td>late fee</td>
<td>NULL</td>
</tr>
<tr>
<td>billing disbute</td>
<td>NULL</td>
</tr>
<tr>
<td>transiction issue</td>
<td>NULL</td>
</tr>
<tr>
<td>billing disbute</td>
<td>NULL</td>
</tr>
<tr>
<td>late fee</td>
<td>NULL</td>
</tr>
</table>
So I am having issues converting my responsive carousel table from individual tables to a single table, any help would be much appreciated.
<table class="table-head">
<thead>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Attr1</td>
</tr>
<tr>
<td>Attr2</td>
</tr>
<tr>
<td>Attr3</td>
</tr>
<tr>
<td>Attr4</td>
</tr>
</tbody>
</table>
<div class="table-scroll carousel">
<table class="carousel-cell">
<th>Title1</th>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title2</th>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title3</th>
<tr>
<td>31</td>
</tr>
<tr>
<td>32</td>
</tr>
<tr>
<td>33</td>
</tr>
<tr>
<td>34</td>
</tr>
</table>
<table class="carousel-cell">
<th>Title4</th>
<tr>
<td>41</td>
</tr>
<tr>
<td>42</td>
</tr>
<tr>
<td>43</td>
</tr>
<tr>
<td>44</td>
</tr>
</table>
</div>
To then turn it into something like this
<div class="table-scroll carousel">
<table class="table-head">
<tr class="carousel-cell">
<th>Date</th>
<td>2021</td>
<td>01 June</td>
<td>05 June</td>
<td>05 June</td>
<td>08 June</td>
<td>10 June</td>
<td>16 June</td>
<td>24 June</td>
<td>25 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td>30 June</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Details</th>
<td> </td>
<td>Bal b/f</td>
<td>Cheque no 816078</td>
<td>Bank Giro credit</td>
<td>Bank Giro credit</td>
<td>Cheque no 816079</td>
<td>Direct debit</td>
<td>Bank charges</td>
<td>Direct debit</td>
<td>Cheque no 816081</td>
<td>SO payment</td>
<td>BACS payment</td>
<td>CHAPS payment</td>
<td>Interest</td>
</tr>
<tr class="carousel-cell">
<th>Debit</th>
<td>£</td>
<td> </td>
<td>800</td>
<td> </td>
<td> </td>
<td>1,864</td>
<td>700</td>
<td>52</td>
<td>400</td>
<td>1,290</td>
<td>300</td>
<td>100</td>
<td>70</td>
<td> </td>
</tr>
<tr class="carousel-cell">
<th>Credit</th>
<td>£</td>
<td> </td>
<td>2,000</td>
<td>2,500</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20</td>
</tr>
<tr class="carousel-cell">
<th>Balance</th>
<td>£</td>
<td>8,196 C</td>
<td>7,396 C</td>
<td>9,396 C</td>
<td>12,896 C</td>
<td>11,032 C</td>
<td>10,332 C</td>
<td>10,280 C</td>
<td>9,880 C</td>
<td>8,590 C</td>
<td>8,290 C</td>
<td>8,190 C</td>
<td>8,120 C</td>
<td>8,140 C</td>
</tr>
</table>
</div>
The CSS for both looks like this
.table-head {
float: left;
width: 80px;
border-right: 2px solid #333;
border-collapse: collapse
}
.table-scroll {
float: left;
width: calc(100% - 81px);
border-top: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
background-color: #AAA;
}
.table-scroll table {
margin-top: -1px;
width: 30%;
min-width: 300px;
max-width: 40%;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #f2f2f2;
color: #0076BF;
}
th, td {
padding: 10px;
border: 1px solid #333;
background-clip: padding-box;
}
td {
background-color: #fff;
}
And the flickity config
var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
// options
freeScroll: true,
contain: true,
prevNextButtons: false,
groupCells: true,
cellAlign: 'left'
});
Both are displayed on codepen, multiple tables https://codepen.io/joshuaserpis/pen/ZEojLKR
Single table https://codepen.io/joshuaserpis/pen/oNoOgYN
<table id="layouttable">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
When Mobile Size Becomes
1 4
2
5
3
6
I want to list them in the order above.
flex - order was not available because of tr.
Does anyone know of a really simple solution like this?
A quick and very dirty solution:
#media only screen and (max-width: 600px) {
.desktop-table
{
display: none;
}
}
#media only screen and (min-width: 601px) {
.mobile-table
{
display: none;
}
}
<table id="layouttable" class="desktop-table">
<tr>
<td class='col1'>1</td>
<td class='col2'>2</td>
<td class='col3'>3</td>
</tr>
<tr>
<td class='col4'>4</td>
<td class='col5'>5</td>
<td class='col6'>6</td>
</tr>
</table>
<table id="layouttable-mobile" class="mobile-table">
<tr><td class='col1'>1</td></tr>
<tr><td class='col4'>4</td></tr>
<tr><td class='col2'>2</td></tr>
<tr><td class='col5'>5</td></tr>
<tr><td class='col3'>3</td></tr>
<tr><td class='col6'>6</td></tr>
</table>
My first non-aggregated table is like below with the first 3 columns.
I need to create a table with another column with the monthly earnings aggregated for the corresponding department as shown in the red-highlighted column:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Date</th>
<th>Department</th>
<th>Daily Earnings</th>
<th bgcolor="#ff6633">Dept Monthly Earnings</th>
</tr>
<tr>
<td>02-26-2018</td>
<td>1</td>
<td>10</td>
<td bgcolor="#ff6633">60</td>
</tr>
<tr>
<td>02-27-2018</td>
<td>2</td>
<td>40</td>
<td bgcolor="#ff6633">140</td>
</tr>
<tr>
<td>02-28-2018</td>
<td>1</td>
<td>50</td>
<td bgcolor="#ff6633">60</td>
</tr>
<tr>
<td>02-28-2018</td>
<td>2</td>
<td>100</td>
<td bgcolor="#ff6633">140</td>
</tr>
<tr>
<td>03-01-2018</td>
<td>1</td>
<td>150</td>
<td bgcolor="#ff6633">200</td>
</tr>
<tr>
<td>03-02-2018</td>
<td>1</td>
<td>50</td>
<td bgcolor="#ff6633">200</td>
</tr>
<tr>
<td>03-02-2018</td>
<td>2</td>
<td>100</td>
<td bgcolor="#ff6633">100</td>
</tr>
</table>
</body>
</html>
How do I create a table in the above format in Hive/SQL?
Appreciate your help
You can use window functions:
select t.*,
sum(daily_earnings) over (partition by department, trunc(date, 'MON')) as dept_monthly_earnings
from t;
I have this table of input fields and was wondering how to add new "cells" to specific columns. Just like this:
Is there a way to do this by simply adding a new <tr>. Or do I have to do this by adding input fields with labels outside of a <table> element. If I go this route, is there Bootstrap/CSS stylings I could add to "attach" these fields to those table columns so they would resize with them?
If I understand you question correctly, you can just add a new row. Use the colspan attribute on the td to specific how many column the cell will span. In your case, your first cell that contains "TOTAL" will span across 6 cells, which will be like <td colspan="6">TOTAL</td>, and apply some some css styles to remove the border and align the text to the right.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th, td {
min-width: 70px;
height: 20px;
}
td.total {
text-align: right;
padding-right: 5px;
}
.no-border {
border: none;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="total">
<td colspan="6" class="total no-border">TOTAL</td>
<td></td>
<td class="total no-border">TOTAL</td>
<td></td>
<td class="no-border"></td>
</tr>
</table>
<tfoot>
<tr>
<th colspan="6" style="text-align:right">Total:</th>
<th></th>
<th colspan="1" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:right"></th>
</tr>
</tfoot>
then please see this code
https://datatables.net/examples/advanced_init/footer_callback.html