Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP
Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
enter image description hereI have a table with mouse hover effect, where last column is merged. Below is my code:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
<style style="text/css">
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:nth-child(-n+50):hover td:nth-child(-n+2)
{
background-color: #ffff99;
}
</style>
<body style="text-align:center">
<h1 style="color:green;">
Mouse Hover
</h1>
<h2>Requirement is When I hover to Canada, Color only Canada not Gloria Jean's Coffees and Coffee</h2>
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td>Gloria Jean's Coffees</td>
<td>Coffee</td>
<td rowspan="3" class="highlight" data-cell="c5">Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
</tr>
</table>
</body>
</html>
`
When I hover a particular row, hover effect works properly. But when I hover to the last merged column, hover effect work for 1st row also.
I want that, when I hover to the last merged column, hover effect only work on that particular merged column, not 1st row.
as per comment, here i use small jquery code also,
use hover function of jquery and other row use css hover with css :not property.
try like below,
$(document).ready(function(){
$('.nothighlight').hover(
function () {
$('.nothighlight').css('background','#ffff99');
},
function () {
$('.nothighlight').css('background','#ffffff');
}
);
});
table,th,td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr:hover td:not(:last-child):not(.nothighlight)
{
background-color: #ffff99;
}
.highlight:hover
{
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="text-align:center">
<table align="center" class="hoverTable">
<tr>
<th>Name</th>
<th>Item</th>
<th>Location</th>
</tr>
<tr>
<td class="nothighlight">Gloria Jean's Coffees</td>
<td class="nothighlight">Coffee</td>
<td rowspan="3" class="highlight" >Canada</td>
</tr>
<tr>
<td >North End Coffee Roasters</td>
<td>Bagel</td>
<td style="display: none;"></td>
</tr>
<tr>
<td >Secret recipe</td>
<td>Cheess Cake</td>
<td style="display: none;"></td>
</tr>
</table>
</body>
I am writing in html a table with several rows with a different number of columns. To do that, I am putting several tables, typically each for a specified number of columns.
For example:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<table class="border paddingDefault" style="width:60%; border-collapse: collapse;">
<thead>
<tr>
<th valign="middle" width="55%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Name of rule</span></th>
<th valign="middle" width="5%" style="background-color: cyan;" class="column border" ><span style="font-weight: bold;">Status</span></th>
</tr>
</thead>
<tbody>
<tr>
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: green;">OK</td>
</tr>
<tr style="border-collapse: collapse;border: 0px; padding:0; margin:0;">
<td valign="middle" class="borderTop paddingDefault">The rule name of index 0</td>
<td valign="middle" align="center" class="borderTop paddingDefault" style="background-color: red;">KO</td>
</tr>
</tbody>
</table>
<table class="borderNone paddingDefault" style="width:60%; border-collapse: collapse;border: 0px; padding:0; margin:0;">
<thead>
<th valign="middle" width="100%"/>
</thead>
<tbody>
<tr>
<td valign="middle" class="border paddingDefault">the error of index 0<br/>
the error of index 1<br/>
the error of index 2<br/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
with the following stylesheet:
table.middle {
vertical-align: middle;
}
table.borderNone, th.borderNone, td.borderNone {
border: none;
border-collapse: collapse;
}
table.paddingDefault, th.paddingDefault, td.paddingDefault {
padding: 10px 10px;
}
table.border, th.border, td.border {
border: 1pt solid black;
border-collapse: collapse;
}
td.borderTop {
border-right: 1pt solid black;
border-left: 1pt solid black;
border-top: 1pt solid black;
border-bottom: none;
border-collapse: collapse;
}
It works, but I have a small space between the two rows (in my case, the two html tables), that I can't remove:
How could I remove this separation?
You only need add this code to your css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
I want to send mail with the below template from code. I am trying to hide and display the secondary table with the checkbox. I think I am stuck with the css selector. Is it possible to hide and show something with the checkbox. Important thing is I want to do it in only css , " NO JS " Here is the codepen edit link : https://codepen.io/rishisarma/pen/QWqyqXd?editors=1100
.box {
display:none;
}
<-- Here is the issue I think when I tried to hide and display the table it is not working.-->
input[id='trigger']:checked table.box{
display:block;
}
table {
font-family: "Trebuchet MS";
margin: 8px;
}
tr:nth-child(odd) {
background-color: #f7f7f7;
}
.rightalign {
text-align: right;
width: 125px;
}
th {
background-color: #e84f32;
padding: 8px;
color: white;
border: 1px solid #e0e0e0;
}
td {
padding: 8px;
border: 1px solid #e0e0e0;
}
<table>
<thead>
<tr>
<th colspan="9" style="width:100%;" id="head">Client Wise AttendenceReport (2021/12/05)</th>
</tr>
<tr>
<th></th>
<th>SRNO</th>
<th>Customer</th>
<th>Organizations</th>
<th>Attendees (2021/12/04)</th>
<th>Attendees (2021/12/05)</th>
<th>Txns (2021/12/04)</th>
<th>Txns (2021/12/05)</th>
<th>Inclination (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="trigger">
</td>
<td>1</td>
<td>TSTS</td>
<td>33 (0%)</td>
<td>1605382</td>
<td>1605563 (0.01)</td>
<td>139313</td>
<td>20726</td>
<td>-85.12</td>
</tr>
<tr>
<td colspan="9">
<table class = "box">
<tr>
<td colspan="5" style="background-color: #e84f32; padding: 8px; color:white; text-align:center">Organisation Wise Transaction Report On 05-Dec- 2021</td>
</tr>
<tr>
<th>Slno</th>
<th>Organisation</th>
<th>Registered Users</th>
<th>Present Today</th>
<th>Percent(%)</th>
</tr>
<tr>
<td>1</td>
<td>TSTSATTENDANCE</td>
<td class="rightalign">294</td>
<td class="rightalign">3</td>
<td class="rightalign">1%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>GVK</td>
<td>2 (0%)</td>
<td>1329</td>
<td>1329 (0)</td>
<td>681</td>
<td>686</td>
<td>0.73</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>SIL</td>
<td>33 (0%)</td>
<td>202240</td>
<td>203042 (0.4)</td>
<td>111348</td>
<td>7519</td>
<td>-93.25</td>
</tr>
</tbody>
</table>
I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working.
If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.
<table style="width: 100%">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76" bgcolor="#4a5666"> </td>
</tr>
</table>
Am I doing something wrong, and is there a way I can fix it?
Thanks
Coupled Rows
Check this solution out:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Credits to #TokPhobia for this answer (html table cell width for different rows)
tables have columns. The width of a column is constant. Use separate tables
table{
box-sizing:unset;
border-spacing:0;
}
<table style="width: 100%;">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76%" bgcolor="#4a5666"> </td>
</tr>
</table>
You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>