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.
Related
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.
Here's my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Credit Balance</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1 id="idInput">Account </h1>
<table>
<thead>
<tr>
<th>Balance</th>
<th>Charges/Credits</th>
</tr>
</thead>
<tbody>
<tr>
<td id="balance">filler</td>
<td id="chargeCredit"> filler</td>
</tr>
</tbody>
</table>
<script src="accountprompt.js"></script>
<script src="index.js"></script>
</body>
</html>
and here's the CSS
h1 {
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
font-weight: 500;
}
table,
th,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th,
td {
padding: 15px;
text-align: left;
font-weight: lighter;
font-family: Arial, Helvetica, sans-serif;
}
I've tried deleting my CSS or JS, but I can't get the borders to return... when I went to bed last night I swear it was working fine, but I must have edited something and gone to bed!
When I went to https://jsfiddle.net/6a0opv7d/ and put your code, I saw the borders. Maybe you need to clear your cache and reload. That can be done by doing Shift + F5 on Windows. Or make sure that your CSS is linked properly, although all the other CSS is working.
table, th, td {
border: 1px solid black;
}
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.
I'm getting a 2px unwanted margin/padding/border, but can't for the life of me see what's causing it. It comes out the same way in both FF47 and O 36.0.2130.80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add
border-spacing: 0px;
To the table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
border-spacing: 0px;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table><tr><td height="50"></td></tr></table>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/
Add "border-collapse: collapse;" to your table element, you can see a pic here:
You can archieve your goal more clean and professional using divs instead tables:
BODY {
background-color:#555577;
}
#progress-containes {
margin-top: 50px;
width : 400px;
height: 30px;
background-color: #fff;
}
#progress-bar {
background-color:#780000;
font: 400 9pt/1 "Verdana","Arial","Helvetica";
width: 50%;
color: #fff;
padding-top: 8px;
padding-left: 6px;
box-sizing: border-box;
height: 100%;
}
<div id="progress-containes">
<div id="progress-bar">
FOO
</div>
</div>
I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>