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.
Related
The CSS property caption-side allows you to align the <caption> element to either the top or bottom of a table:
https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side
How can I set the caption to appear on both the top and bottom? This could be useful for larger tables.
Ideally I would like to avoid putting a <p> tag or similar above the table and effectively duplicating the caption mark-up.
This is not possible with just HTML and CSS without duplicating the caption content.
Depending on your use case, you want either the caption (along with the table header and/or footer) to remain visible when scrolling, the caption to appear at the bottom of a table large enough for the caption to disappear from the top, or the caption to always appear twice. The first two require JavaScript (and especially in the case of the former some pretty heavy DOM and layout manipulation), and the third is only possible by duplicating the caption content (with JavaScript if you prefer not to pollute your markup) and putting the duplicate outside of the table, because Firefox is unable to render more than one table-caption per table due to a bug.
table:after {
content: attr(title);
background-color: #333;
color: #fff;
}
table:before {
content: attr(title);
background-color: #333;
color: #fff;
}
<table title="O caption, my caption!">
<tr>
<td>CSS Tricks</td>
<td>some text</td>
</tr>
</table>
Not quite what you asked for, as there is now no <caption> element. But the caption text only appears once in the code.
add in your HTML file:
<p id="lblCaption">YOUR CAPTION HERE</p>
add in your CSS file:
#lblCaption { position: fixed; }
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
I want to:
be able to style some text on my HTML page so that a certain background color only covers the text and not beyond it.
Ideally I would like to control this from one div.
Here is my jsfiddle of the below:
#edit_this_div {
min-width: 0px;
background-color: yellow;
}
#bad_way {
background-color: yellow;
display: inline-block
}
<div id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</div>
<br>
<div id="bad_way">This is the inefficient and manual way.</div>
What I tried:
The way I thought of accomplishing this is to set the div as an inline block, which I've also shown in my jsfiddle. However, I rather not do this because I feel it would complicate things; when I did this my block started jumping around and combining with other elements. I don't plan to have any other elements with the div so I am fine with it staying as a block that takes up the whole line on the screen.
With the display of block, I also tried setting the padding and minimum widths but it doesn't have an effect laterally for removing the extra color that spills past the text.
It is generally recommended that you put text into appropriate block tags, i.e. <p>...</p>, <h1>...</h1>, <blockquote>...</blockquote>, etc.
If you did that, it would be easy, for example:
<div id="edit_this_div">
<p>Please edit this div to there isn't extra yellow background without manually setting the width.</p>
</div>
Then the CSS:
#edit_this_div p {
background-color: yellow;
display: inline;
}
Even cleaner would be to use both <p>-tags as well as additional inline tags, for example <span>-tags:
<div id="edit_this_div">
<p><span>Please edit this div to there isn't extra yellow background without manually setting the width.</span></p>
</div>
CSS:
#edit_this_div p span {
background-color: yellow;
display: inline;
}
What you need is <mark></mark> tag, like this:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Here's a fiddle for you:
http://jsfiddle.net/am9rzfmd/
The default css settings for this tag are:
mark {
background-color: yellow;
color: black;
}
So you don't have to explicitly define the css, only just in case you need to change the color.
Update
As misterManSam pointed out:
Be aware that the element has a special semantic meaning and
shouldn't be used if you just want "to make my text a yellow
background"
Change it from a div to a span and it will only stretch its width to the contents within it.
<body>
<span id="edit_this_div">Please edit this div to there isn't extra yellow background without manually setting the width.</span>
<br>
<br>
<span id="bad_way">This is the inefficient and manual way.</span>
</body>
http://jsfiddle.net/bbv5ryhk/
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.
How to make foo invisible using CSS (CSS3 if needed) while keeping bar and fizz visible?
<table>
<tr>
<td>
<textarea>bar</textarea>
<input type='button' title='fizz' />
foo
</td>
</tr>
</tbody>
Making foo in the same color as background is acceptable, but the trick is - background is an image, hence - foo must be transparent instead of solid color.
JavaScript isn't an option either.
Changing HTML is not an option either.
Any ideas?
This worked fine in IE8 and Firefox (IE7 left little dots for words, which I guess if you set the font-color to something that blends with the background image, it might do fine. Note that this does not affect either the text-area or the input for any text in them.
td {font-size: 0;}
ADDED ON EDIT
WOW I mean, really! This worked on IE7-8, Firefox, and Safari
td {visibility: hidden}
td textarea,
td input {visibility: visible;}
As a side note, I tested this with elements wrapped in div rather than a table, I even did a div in a div and the inner div shows while other content is hidden.
Apparently, the visibility property acts on the element, and (unlike opacity) propagates to the child elements by inheritance, so that if one explicitly sets a child element visibility it no longer inherits the hidden but uses its own setting of visible and the fact that the wrapper is hidden does not matter.
EDIT: Scott's is better. Use his.
I don't think a proper solution is going to be pretty.
td {
position: relative;
left: 9001px;
}
textarea {
position: relative;
right: 9001px;
}
If you don't have to support IE then setting the text to transparent is easy:
table {
background-color: cyan;
}
td {
color: rgba(255,255,255,0);
}
td textarea, td input {
color: #000;
}
You need to put it inside a container like a div then hide the container ..
Set the size of the td to be the same as the size of the textarea (via CSS width and height), then set overflow: hidden on the TD so that the text you want to hide is outside the bounding box?
whoops... should've read the OP a bit more closely. Guess the following won't work after all, since changing the html isn't an option.
Set a css class on the container you want to hide (the textarea?):
...
<textarea class="hideme">bar</textarea>
...
and the following css:
.hideme {
display: hidden;
}
'hidden' makes the element disappear (it's literally not displayed), but still is still accounted for in the document flow and takes up the space it normally would. If you want it to literally be gone and not have any effect on the document, then use display: none.
How about the reverse of Amber's suggestion -
Set overflow to overflow: hidden on the TD, fix the size where it is right now and add a huge padding-bottom on the textarea or button.