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
Related
<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>
I would like to make a table using buefy that looks like this one.
I think that the table design component cannot be seen on the buefys docs website. There are three things that you can do.
First, you can override the css style of the buefy table component, Second, you can add a body and a header inside the buefy table components default slot, or you can just create it your own.
table, td, th {
border: 1px solid black;
}
th {
background-color: #ccc;
}
table {
width: 100%;
border-collapse: collapse;
}
<table>
<thead>
<td></td>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</thead>
<tbody>
<tr>
<th>9:00 - 11:00</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th>11:00 - 13:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th>13:00 - 15:00</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th>15:00 - 17:00</th>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
</tr>
<tbody>
</table>
I'm a starter and I was trying some elements, as practice.
There's sth that i can't figure it out.I also have searched google but no answers found.
I wrote 2 tables, in the first one I used tbody to style the body of the table. But when I load the page, I see the style used in css for the tbody in the first table, has also effected the second table(without tbody tag) completely.Why is this happening?
Here is the code :
<table id="t1">
<caption>UFO Seen by People</caption>
<thead>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Jack</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Blah Blah Blah</td>
</tr>
</tfoot>
</table>
<table id="t2">
<caption>UFO Seen by People2</caption>
<colgroup>
<col span="2" style="text-align:right; background-color:yellow;">
<col style="background-color:cyan; background-image:url('baelen.jpg');">
</colgroup>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
<tr>
<td rowspan="3">Dan</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</table>
And here is the css used :
#t1 { border:2px solid black; border-spacing:10pt; background-color:pink; width:100%;}
#t2 { border:2px solid rgb(20,20,20); border-collapse:collapse; width:100%;}
tbody { background-color:white; text-align:center; vertical-align:middle; font-size:20pt;}
That's really simple, that affect the second table cause you use tbody in css and not #t1 tbody, use correct selector if you want to affect only one element.
In addition I advise you not to use style on HTML and in CSS except in the case of manipulation in JavaScript. This will also allow you to better understand what does what, if you want to give a particular style to elements of your table assign their classes to your CSS.
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>
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;