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.
Related
This is a variation of James Donnelly's answer to a clickable link in a TD question. I found a case where his answer doesn't completely work.
Here is the example in JSFiddle
I added vertical-align to td and lots of text to Parent1.
table.coolTable td {
vertical-align:top;
...
The problem is that the empty space under Parent2 is not clickable. How do I get that part clickable too? Specifying fixed unit heights works but I don't want to constrain my table with fixed heights.
Thanks!
The easiest solution would be to add onclick event listeners and a cursor: pointer; style to the tds.
HTML
<td onClick="document.location.href='#child'">
...
</td>
CSS
table.coolTable td {
...
cursor: pointer;
}
Updated JSFiddle
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
As part of redesigning a site, I am trying to style a table with css.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
I ended up with this:
<table class="table1">
.table1 {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}
The weird problem: when applying the css style to the table, the result is slightly different. The space between cells is slightly larger.
Please see the jsfiddles:
Table not style with css: http://jsfiddle.net/32534/1/
Table styled with css: http://jsfiddle.net/47AUR/1/
Why the extra space between the text inputs? What am I doing wrong?! Thank you!
Edit: Using Google Chrome.
cellpadding affects td padding too, so simply add:
.table1 td{
padding: 0;
}
By default chrome adds it's default styling:
`border-spacing: 2px;` on the table.
In http://jsfiddle.net/32534/1/ you haven't mentioned any styling for table. Hence it's picking up default style of chrome.
But in next fiddle link: http://jsfiddle.net/47AUR/1/ you have specifically mentioned the style for the table, which overwrites the default style of chrome.
It's a good idea to use reset.css to be consistent across all browser's and ignore the default styling of all browser's
Simply add
td {
padding: 0px;
}
it will work with a padding:0 on the td (as that is what the cellpadding affects) elements and a second l to colapse
demo at http://jsfiddle.net/at4yL/
I have a html table with 3 rows and 1 column. In the top and button row I have images and in the middle row I have div.
Between my rows I see a separation (I see background of my page). I tried to set all padding and margins to zero (for tables, div and images) and I still have this separation. Can anybody, please, help me to solve this problem.
Try using 'border-collapse':
table {
border-collapse: collapse;
}
Set the cellspacing=0 in the <table> tag as well as cellpadding=0.
Use this in img tag :
display: block;
Gonzohunter nailed this, alright, but you may find it easier to just set the style on the table, assuming you are in a recent HTML version.
I used
<table style='border-collapse: collapse;'>
...
</table>
This worked perfectly.
It seems that it's your H2 that's causing it. To fix it, set the top margin of it to zero:
<h2 style="margin-top: 0;"><span class="text">Welcome to the Colored Trails Game Page!</span></h2>
You need to eliminate spacing from the table cells themselves.
In CSS:
<style type="text/css">
td {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
}
</style>
Or in HTML 4.01/XHTML 1.0 DTD (Strict or Transitional):
<table cellspacing="0" cellpadding="0">
[...]
</table>
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.