I'm trying to create a table of empty cells on which I'm attaching Javascript to toggle a class, so I just need to give them a height and width. The problem is when I create the table, while it has padding, I can't get it to maintain it's height. I'm trying to avoid using as when I do, it creates the mouseover of highlighting text, and multiple clicks on the box can select the text.
Looking online, empty-cells: show; comes up as the constant answer, but it doesn't seem to keep the height. I've considered doing it as a series of inline-block divs, but then borders become messy, as the borders don't collapse.
I literally just have an empty table
<table style="border-collapse: collapse; empty-cells: show;">
<tr>
<td style="height: 1.3em; padding: 4px 6px;"></td>
<td style="height: 1.3em; padding: 4px 6px;"></td>
</tr>
</table>
I feel like this is an old HTML problem, and I'm missing some simple answer.
I had seen the question that was suggested as the duplicate, but as the answer there is 5 years old, I thought there must be something more modern for addressing this problem. If there isn't, I guess the visibility trick is the way to go.
Is there a specific minimum height that you want? If so, you can do something like this:
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
Source code from omelniz originally posted here: Can I use a min-height for table, tr or td?
Try this
For <th> and <td> :
th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}
For <td> only :
td:empty::before{content:'\00a0';visibility:hidden}
Description:
'\00a0' is code for single space
visibility:hidden to hide that single space
Related
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
In trying to give my emails a more 'professional' look, I want to create a neat looking signature. Now for a test, I first want to create a simple signature. And if I get the hang of it, expand it to a better one.
It seems that I can't seem to 'reset' or clear the table. But I can't figure out what the problem is... Any help would be appreciated!
For starters I want to create a signature like this:
I created a single html file (including css) with simple code in it. See below. The problem I keep experiencing is that for some reason, the tables height seems to be larger (only on the bottom) when I insert an image in one of the cells. See problem.
As you can clearly see, the table height exceeds that of the picture. I can't figure out how to remedy this...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
in terms of solving your problem you may want to re-look at the structure of your table. The development of HTML emails and signatures can be pretty hard to do as many email clients respond different and have different support levels.
A guide to writing HTML, CSS and JS for email client usage has been created by Campaign Monitor and can be found here: https://goo.gl/oo1tcU
Support is so varied and there are very few 'safe' elements and attributes also campaign monitor's guide sadly doesn't include a list of the buggy HTML attributes. For example personally I have experienced rowspan and colspan not working correctly in a lot of email clients therefore I wouldn't suggest using them at all. Instead draw up a grid which has equal structure and use empty tags with defined HTML width and height attributes to make the table work for you.
Unfortunately to make an signature look exactly the same in all clients steps like using empty but defined tags are necessary or some clients will simply ADD the 's the colspans are running over.
In HTML emails/signatures you must define EVERYTHING to make sure nothing changes, a table tag I use at the start of all my projects looks something like this:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >
Also for all images use a tag like below and define the width and height in HTML NOT CSS.
<img src="" alt="" width="" height="" style="display: block; border: none;"/>
Email clients cause you to write HTML like its the 1990s, it's very frustrating but without considerations like these you may get the result you want in one client but if you send to another your signature will look different to a recipient. As you are trying to increase your professionalism I assume this wouldn't be desired!
Another tip I would suggest is using as much imagery as possible (and remember to define the width and height in HTML) because if defined correctly a structure built with every td and img tag width and height defined will almost never change. This is beneficial because text fonts also have low support unless they are standard fonts e.g. Arial!
Finally use ONLY Inline styles, many clients strip anything in a head tag out!
This isn't actually an order form (as yet) but I think that best describes it. I want to create a grid of 3 images inline, then text below each, then repeat indefinitely. I tried turning each row into a unique table but alignment became a problem. Then I tried making one table and giving the image and text < tr >'s unique classes, but I'm having trouble getting the height of the text rows to shrink to a more aesthetically pleasing size, and also centering the text below the image. I tried to do this artificially with as many "& nbsp's" as was appropriate, but then the text started wrapping onto a new line and it messed all that up. Code and link to js fiddle below:
<table id="saladGrid">
<tr class="saladPics">
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr class="saladText">
<td class="text"><p> acorn squash, golden beets, pistachios</p></td>
<td class="text"><p> roasted eggplant, herbed ricotta, sumac</p></td>
<td class="text"><p> arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
http://jsfiddle.net/jshweky/5bTW8/
(On a side note, I'm new to stackoverload so if there's any protocol I'm not following with respect to posting, I'd be grateful for any tips/suggestions. Thanks!)
Have a look at this: http://jsfiddle.net/EX9f9/
If you have a look at the code below you'll notice a couple of things:
HTML
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td> //I changed your classes 'one','two',etc
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
<td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
<td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
</table>
In your HTML I changed your id's one, two, etc to classes consisting of the same word/letter, only a different number, for better readability. (Those could also be ID's btw, the main point is the use of equal terms with only one differentiator)
CSS
table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
vertical-align: middle;
}
#saladGrid {
width: 600px;
height: 400px;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
width: 350px;
height: 350px;
background-position: center;
background-size: 350px 350px;
background-repeat: no-repeat;
border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}
In your CSS I removed all the repeated declarations and put them together in one overlapping class. Now, only the background-image has a separate rule for every separate element.
I removed a couple of rules you don't need (and probably added in an failed attempt to style the table to your liking).
At the start I added two rules: table and td. Those are two general classes I always put at the start of my CSS, it's alright if you overwrite some of it later by other rules, these just ensure that the browser doesn't doe any funky business.
I put the whole table in a div, to show you how to contain the size of a table (but notice that the height is still more than the 400px I gave it).
Notice the text-align:center; and vertical-align: middle; in the td rule. These alight your text horizontally and vertically. (The answer to your main question)
IMPORTANT: vertical-align:middle; only works on tables, no other elements. Keep that in mind!
About your first problem:
"...trouble getting the height of the text rows to shrink to a more aesthetically pleasing size..."
This is unfortunately a property of the table: it will form itself to the content and the space it has on the page. It will fill every inch it gets and will automatically stretch to fit the content. You CAN NOT (as far as I know) limit the size of one row of a table.
Only solution would be to put the table in a div and limit the height of the div so that the whole table gets squished together, and even then I couldn't tell you for sure how the table will behave.. you push it in a tiny corner, there's no telling what it will do:)
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
I am creating a form in HTML that will be printed, with fields that need to be written in by the recipient. Basically what I want is a single line that stretches from the end of the field label to the side of the page. Here's how I'm doing it right now:
<table width="100%">
<tr>
<td width="1%">
Label:
</td>
<td style="border-bottom-style:solid; border-bottom-width:1px;">
</td>
</tr>
</table>
This works, but there must be an easier way to do this without needing a whole table element. Any ideas?
Here's my CSS:
span.print_underline
{
display: inline-block;
height: 1em;
border-bottom: 1px solid #000;
}
So your HTML will look like:
<span class="print_underline" style="width: 200px"> </span>
I left the width out, so I could reuse it as much as I want, but you can specify the width.
As a sidenote, I tested the same concept with a div tag instead of span tag, and it did not work in some situations. This is probably because it is semantically incorrect to put a div within a paragraph tag (which is why I used a span), and I generally use paragraph tags instead of using table rows like you've used.
I think your solution is better than the responses thus far. The only thing I'd change about your solution is that I'd use a css class instead of inline.
Your solution will have better alignment than using spans. Your code will look cleaner with table elements than with spans as well.
Also, you might want to consider putting in a textbox in your cell so that your users can input the information directly on the page before printing out.
How about using the span tag?
<span style="border-bottom....">Text</span>
just have a div with appropriate margin to the left. Block-elements by default always expand to the full width.
Meaning:
label {
float: left;
}
div {
margin-left: 10em;
border-bottom: 1px solid black;
height: 1em;
}
<label>label:</label>
<div></div>
it won't stretch the full width between the label and the right side, but you can have the label hide the bottom-border (using background-color or something) and have the div expand all the way to the right aswell (without the margin).
If you want correct semantics, you can even use an input instead of a div, set it's display to "block" and fix the borders and background.