I'm working on my html checklist, to later print out with dynamic text.
However to don't split tables in the middle of a category i created a pagebreaker. In my other htmls it works just fine but in this one its erasing. I guess it has to do with div style category, but even after changing to other tags like it still creates 20.000-30.000 pages (according to chrome or edge)
Here is my code:`
<!DOCTYPE html> <!--Information für den Browser um welches Dokument es sich handelt-->
<html lang="de"> <!--//zuordnung der Sprache-->
<head>
<meta charset="utf-8"> <!--ä, ü, ö möglich-->
<title>Überschrift</title> <!--Tab-Überschrift-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--responsive-->
<style type="text/css">
* {
font-family: Arial, Helvetica, sans-serif;
}
table,
tr,
td {
border: 1px solid #054F9D;
border-collapse: collapse;
}
td {
padding: 0.2rem;
max-width: 12rem;
min-width: 12rem;
word-wrap: break-word;
}
.grey {
background-color: lightgrey;
min-width: 12.5rem;
max-width: 12.5rem;
}
p {
font-weight: bold;
padding-top: 2rem;
}
div {
display: flex;
gap: 100px;
}
#media print {
.pagebreak {page-break-before: always;} /*Seitenumbruch*/
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td class="grey">Text1:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text2:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text3:</td>
<td>...</td>
</tr>
</table>
<table>
<tr>
<td class="grey">Text4:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text5:</td>
<td>...</td>
</tr>
<tr>
<td class="grey">Text6:</td>
<td>...</td>
</tr>
</table>
<div class="pagebreak"></div>
</div>
</body>
</html>
`
And the amount of pages:24.500
Thank you in advance!
i tried changing from div to section, but nothing happened.
I copied the pagebreak directly from my other codes where it workes.
Related
Working on something for school and the "Democrat" column is much wider than the "Republican" and "Independent" columns. I'd like those columns and rows to have equal width if possible, and not sure how to achieve this. I tried using style="width:xx%" and wasn't successful with that. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3" style="width:100%">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
Problem #1
I'd like those columns and rows to have equal width if possible,...
Rows (>tr>) are always equal in width in a <table> so long as the total of colspan are equal for each row. You have succeeded in doing so, so you only need to be concerned with column (<td>/<th>) width.
Problem #2
I have a table with spanned columns and rows, and want to center the last 3 rows
Issues
HTML tables behave differently than other types of elements in that they will automatically conform to the content within each cell (<td>/<th>) and at the same time adjust according to the the width of the <table> element. Setting the width directly to a cell will not work since the table and it's cells are always adjusting to find a balance between it's content and it's dimensions.
Also, it's invalid to have a <caption> outside of a <table>. <caption> (if used) must be the first child of a <table>. In addition, be mindful of multiple selectors such as the following example below which applies not only to <table>, but also to all <th> and <td> as well.
table,
th,
td {
width: 600px;
/* other rulesets */
}
The only reason why you don't have each cell at 600px width is because of how the <table> behaves.
Solution
Problem #1
By default <table> elements are assigned a CSS ruleset: table-layout: auto which is responsible for the behavior previously mentioned. If set to fixed, then each column width can be set directly by applying it to either a <colgroup> or <col> element, or a <th> (or a <td> in the first <tr> if there are no <th>).
In the example below each <col> is assigned a width of 120px via it's class .full (there are 5 columns instead of 6 so 120px x 5 = 600px).
Problem #2
In order to center the last 3 columns apply the following ruleset:
td {
align-text: center;
}
By default <th> is align-text: center so you only need to apply it explicitly to <td>.
Note, the example has been altered to what I believe to be semantically and aesthetically better and isn't a requirement.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Table Layout Example</title>
</head>
<style>
html {
font: 300 2ch/1.2 "Segoe UI";
}
table {
table-layout: fixed;
min-width: 600px;
margin: 10px auto;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: 1.5px;
}
table,
th,
td {
border: 1px solid black;
}
td,
th {
padding: 4px;
}
tbody th {
padding-left: 8px;
text-align: left;
}
td {
text-align: center;
}
.full {
width: 120px;
}
.d {
background: rgba(0, 0, 255, 0.3);
}
.r {
background: rgba(255, 0, 0, 0.3);
}
p {
margin: 4px;
padding: 4px;
border-left: 4px solid #CCC;
font-weight: 700;
font-style: italic;
background: rgba(212, 175, 55, 0.5);
}
.brw th {
font-weight: 600;
}
.opinion {
padding: 12px 0 12px 8px;
border-left: 0;
font-weight: 600;
}
.majority {
font-weight: 600;
}
</style>
<body>
<table>
<caption>Today's Opinion Poll Question</caption>
<colgroup>
<col span="2" class="full">
<col class="full d">
<col class="full r">
<col class="full">
</colgroup>
<thead>
<tr>
<th colspan="2" rowspan="2" style="padding: 8px 6px; text-align: left">
<p>Do you favor or oppose increasing the minimum wage?</p>
</th>
<th colspan="3" scope="colgroup" style="background: #FFF">Political Party</th>
</tr>
<tr class="brw">
<th scope="col">Democrat</th>
<th scope="col">Republican</th>
<th scope="col">Independent</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup" style="border-right: 0;">Public Opinion</th>
<th class="opinion" scope="row">Favor</th>
<td class="majority">70%</td>
<td>35%</td>
<td class="majority">55%</td>
</tr>
<tr>
<th class="opinion" scope="row">Oppose</th>
<td>25%</td>
<td class="majority">60%</td>
<td>30%</td>
</tr>
<tr>
<th class="opinion" scope="row">Unsure</th>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</tbody>
</table>
</body>
</html>
Remove the style="width:100%" from the <th colspan="3" style="width:100%">Political Party</th> column. Because width: 100% here means that the width is going to be in inherited from the parent which is in this case is the <tr element and since this cell is supposed to span multiple cells in another row, the Democrat cell is taking an additional space. If you want a fixed width on all cells, you can set on th level in the styles. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
I have the following css style which simply sets the styling stuff for the HTML table.
html
{
height: 100%;
width: 100%;
}
body
{
line-height: 1.6em;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden;
}
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 70%;
height: 70%;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
color: #669;
padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
I have tried setting height property of th and also of td to 10%, but that doesnot work. If the number of rows get less, the rows automatically get larger instead of staying at the height of 10%.
The following HTML file is using the above mentioned CSS styling. Every thing seems to work fine except for the ROW length issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BOOKS</title>
<style type="text/css">
<!--
#import url("style.css");
-->
</style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>
</body>
</html>
How can I modify the CSS so that the height of ROWS stays fixed at 10% in any case.
I am not sure if you want to set width or height as you mentioned both. But you could try max-width: 10%; or an absolute value, as I am not sure, what your aiming exactly. You also could try using !important like width:10%!important;
Maybe this helps. If not you could provide a picture with your aim so we can understand better.
How to merge the two blank cells (one above 'Be' and one above 'B') with big blank space in the middle? I tried colspan and rowspan in different ways and still don't know how to do it.
https://i.stack.imgur.com/tw5SE.png
My code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="ex10.css">
</head>
<body>
<table style="width:800px;">
<tr class="tr1">
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr class="tr2">
<td>H</td>
<td class="tr1"></td>
<td colspan="3" rowspan="3"></td>
<td></td>
<td>He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td>B</td>
<td>Ne</td>
</tr>
<tr class="tr4">
<td>Na</td>
<td>Mg</td>
<td>Al</td>
<td>Ar</td>
</tr>
<tr class="tr5">
<td>K</td>
<td>Ca</td>
<td>Sc</td>
<td>Ti</td>
<td>V</td>
<td>Ga</td>
<td>Kr</td>
</tr>
</table>
</body>
</html>
CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.tr1, th{
color: red;
width: 110px;
}
td{
width: 110px;
height: 54px;
text-align: center;
font-weight: bold;
font-family: Calibri;
}
td:first-child {
background-color: #b4eba8;
}
td:nth-child(2):not(.tr1){
background-color: #76f9fd;
}
td:last-child{
background-color: #fadb47;
}
Structurally you can't... but with css you can do it appear, here's your "only-visual" solution:
https://jsfiddle.net/fe74c5cq/
.bigtd{
border:none;
}
.tdForT
{
border-left:none;
}
.tr1{
border-right:none;
}
take a look at css section, these three classes on the top made the trick (obviously I've put it in the right elements), you should be aware that the border that you see in a natural table, seems to be all "single" borders, but instead, when they are between a cell and another, they are twice!
You see a "single" border because in CSS there's a the property "border-collapse" for table valorized with "collapse" value.
So, when you want to make a border desappear, you must take it away from all adjacent elements.
I have a very stupid problem: I want a field inside a table, which has 100% of the Table-Cell height. The Problem is the IE-Browser, which won't do that. On Chrome etc. it works (Firefox too I think). Here is a sample html-File:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
color: #000000;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: medium none;
}
table.subTable td {
border-width: 0px;
padding: 0px;
margin: 2px;
}
.ui-slottable table {
height:100%;
width:100%;
}
.ui-slottable-slot {
width:100%;
height: 100%;
border-radius: 5px;
border-width:1px;
border-style:solid;
border-color: #cccccc;
background-color:#eeeeee;
border-collapse: separate;
}
</style>
</head>
<body>
<div class="ui-slottable">
<table>
<tbody>
<tr>
<td>
<div class="ui-slottable-slot">
<table class="subTable" style="margin:2px;">
<tbody>
<tr>
<td>T1 Hallo</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="ui-slottable-slot">
<table class="subTable">
<tbody>
<tr>
<td>T2 Hallo</td>
</tr>
<tr>
<td>Halloggggggggggggggggggg</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this File The Field T1 should have the same height as T2.
I've tested a lot of different way's, but nothing worked...
Hope someone can tell me how IE makes this...
Attempting to set height usually does not work.
You can get the same height for the fields by using 2 lines in the innermost table for T1, too. (Use nbsp as contents of the extra line.) Then remove the style="margin:2px;" inside the table html tag.