I want to remove the padding between the rows and between the two lines of text:
<br />
Please see the explanation below:
http://79.170.44.112/activate-enterprise.co.uk/wp-content/uploads/2014/09/meet-the-team-image.jpg
My table html can be seen at: http://jsfiddle.net/63nzsht1/
My webpage can be seen at:
http://79.170.44.112/activate-enterprise.co.uk/meet-the-team/
The text is in a separate row (both lines of text in the same cell).
Many thanks!
P.S. Tried
cellpadding="0" cellspacing="0"
But I'm still getting the spacing issue, think it must be being pulled from somewhere else?
There are multiple things causing a gap between the image and the text:
Because images are displayed inline, there is a reserved gap beneath inline elements to make way for letter descenders. Display your images as blocks or alter their vertical alignment to lost the gap.
Your table cells display their content in the middle, vertically, by default. So your text is vertically aligned in the middle, not the top. They also have a default padding, remove this.
Your table has border spacing by default, which can be removed with border-spacing:
img { display:block; }
table { border-spacing:0; }
td { vertical-align:top; padding:0; }
JSFiddle
Try cellpadding="0" cellspacing="0" properties at the table!
The cellpadding and cellspacing attributes are supported in all major browsers.
<table cellpadding="0" cellspacing="0" >
<tr>
<th>h1</th>
<th>h2</th>
</tr>
<tr>
<td>m</td>
<td>m</td>
</tr>
</table>
table {
line-height:0.8em;
}
td {
padding:0;
margin:0;
vertical-align:top;
}
img {
display:block;
}
http://jsfiddle.net/63nzsht1/9/
Try adding
padding: 0;
line-height: 12px;
to element td which has text in it (define class for that).
http://jsfiddle.net/63nzsht1/10/
You need to set the padding to 0px and set the line height to a specific number:
The distance between lines will change using line height.
th, td {
padding: 0px;
line-height: 10px;
}
<a href="/cilla/" style=" line-height: 1;">
<span style=" display: block; line-height: 1.7;">Managing Director</span>
<span style="display: block;"> Cilla McKay</span>
</a>
one of way to solve ur problem
Related
My code is similar to as follows:
table,tr,td {
border-collapse:collapse;
border: 1px solid black;
}
label {
font-size: 0.7rem;
}
table {
table-layout: auto;
}
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
<tr>
<td>
<label>Foo bar</label>
</td>
</tr>
</tbody>
</table>
The issue occurs when the element on top is bigger than the element on the bottom. I know the solution seems obvious: use table-layout: auto; However, as you can see, that doesn't work.
There is no padding or margin, and the height is not set manually on either of them. My question is as follows: Why is the space there, and, more importantly, how can I remove it?
I feel really stupid now: it was just the line-height property. I set it lower and that fixed it.
Edit: A more simple solution suggested by VilleKoo is to set the display property of the <label> to block or flex (setting the padding to 0, which is mentioned in the comment, is not required)
It is kind of wierd but in my table cell I have a bullet point which for some strange reason it causes the text to align in the center of the cell even though I have no include text-align center or anything of the sort. To be honest all of the other table columns which by the way do not include bullet points align to the left as normal but for the column which contains a bullet points, its causes the text to the align center and I do not know why this is.
My question is does the <ul> tag cause the text to align center by default within a table cell or is there something which is somehow contradicting with the <ul> tag and hence it is aligning the text to the center?
Below is the table (cut down code):
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="11%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<?php
foreach ($arrQuestionId as $key=>$question) {
echo '<tr class="tableqandarow">'.PHP_EOL;
echo '<td width="11%" class="imagetd">'. ( ( empty ($arrImageFile[$key]) ) ? " " : '<ul class="qandaul"><li>'.htmlspecialchars( is_array( $arrImageFile[$key] ) ? implode(",", $arrImageFile[$key]) : $arrImageFile[$key] ) ). '</li></ul></td>' . PHP_EOL;
echo '</tr>'.PHP_EOL;
}
?>
</tbody>
</table>
Below is the css which includes css for table:
.imagetd{
font-size:75%;
}
.qandaul{
list-style-type:square;
}
#tableqanda_onthefly_container
{
width:100%;
overflow-y: auto;
overflow-x: hidden;
max-height:500px;
}
#tableqanda_onthefly
{
width:100%;
overflow:auto;
clear:both;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
#tableqanda{
width:100%;
margin-left:0;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
Due to common defaults in browsers, a ul element is normally displayed as indented. This may depend on different CSS properties in different browsers, so you may need several CSS declarations to remove the indentation. For example, the indentation might take place due to default left padding, or due to default left margin. A fairly safe approach is the following (assuming you wish to remove default vertical spacing around the element, too):
ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
The second rule is there to reserve room for the list bullets. The bullet appears on the left of the li item content, so some space is needed for it. The value of 1.3em tends to give a balanced appearance, with roughly equal spacing on the left and on the right of the bullet.
does the <ul> tag cause the text to align center by default within a table cell?
No, the UL tag adds a left-margin, which may cause the list items to appear center.
is there something which is somehow contradicting with the <ul> tag and hence it is aligning the text to the center?
This is possibly the case. Inspect the styles applied to the <ul> using a html/css inspector.
The <ul> tag adds left margin, in the table cell.
The ul tag automatically adds 40px of left padding. Setting the padding to 0 should fix your problem.
This has been driving me crazy, sadly haha. I can't figure out why I can't make the "X's" in my table align with the bottom of the table... I've tried putting vertical-align in different places in the CSS, but to no avail :(. Also am I using correctly for blank spots in my table?
Here are snips of both my HTML and CSS files...any comments would be greatly appreciated
<html>
<head>
<title>Day4: Table King</title>
<link rel="stylesheet" type="text/css" href="stylesday4.css" />
</head>
<body>
<table id="products">
<tr>
<th><span></th>
<th>Free Version</th>
<th>Lite Version</th>
<th>Full Version</th>
</tr>
<tr>
<td>Advertising</td>
<td id="td">X</td>
<td><span></td>
<td><span></td>
</tr>
<tr class="alt">
<td>Catering Software</td>
<td><span></td>
<td id="td">X</td>
<td id="td">X</td>
</tr>
....
#products
{
border-collapse:collapse;
width:100%;
}
#products th, #products td
{
border:1px solid #0000FF;
background-color:#C0C0C0;
padding:3px 2px 7px 5px;
}
#products th
{
font-size:20px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0000FF;
padding-top:4px;
padding-bottom:5px;
background-color:green;
}
#products td
{
vertical-align:bottom;
}
#products tr
{
text-align:center;
color:#0000FF;
}
#products tr.alt td
{
color:blue;
background-color:#A7C942;
}
You could use position: relative on your td and table, then move the td to the bottom by using bottom: 0px.
However, I think this website should answer your question a bit more clearly: http://shouldiusetablesforlayout.com
With the HTML and CSS you have provided the vertical aligning seems to be working as I'd expect. I set up a little test on jsfiddle here http://jsfiddle.net/dttMd/ . I put some line breaks in the first row to confirm that the following text was bottom aligning. If this isn't what you are after could you clarify what exactly it is that you need.
As for the empty cells, what you are doing is wrong since <span> elements need to have a closing tag. My personal preference is just to put in a into the cells. I don't think there really is a "right" way though necessarily (though I am happy to be corrected).
that's because you have a 7px bottom padding in the td. You can change it to
padding:3px 2px 0 5px;
and the spacing is gone.
http://jsfiddle.net/6AAvH/2/
Padding can mess with layout and height/width. Get rid of the padding from your td and give it a height instead.
Sometimes line height can make it seem like it's not aligning to the top or bottom. If your font size is less than its container, it might be inheriting the line height. If you set the line height to the font size (or just line-height: 1) and give the td a height, that should do the trick.
<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td>
Your <span> is missing the closing </span>, and you shouldn't be using a span to take up space since it is an inline element. For tables, you shouldn't even need a placeholder, but if you are more comfortable you can use or if you want it to inherit some kind of padding/margin style, you can use that element (<p> </p> or <h3> </h3>).
You can just simply add valign="bottom" in every td and this will make content to be aligned at the bottom and is supported by every browser in the world!
Hope this would help you.
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>
In the page Toggle Squares , I have a table made out of an <img /> in every cell generated by JavaScript. I applied the following CSS:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
In order to remove all spacing. However, now I'm getting a thin background line of spacing between two adjacent rows. How can I eliminate it?
The page is valid XHTML + CSS.
Thanks for any help.
Regards,
Shlomi Fish.
add cellpadding="0" and cellspacing="0" attributes to table, or try to use
border-collapse: collapse;
border-width: 0;
in css..
.game td img {
display: block;
}
Images come with their own white space
Fixed:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
The problem is: inline image is treated as a letter with ascent = height of the image and descent = descent of the font. That means that a table cell that contains only an image has the height that is bigger than the image height.
The simplest way to fix that is to set line-height to zero for the whole table thus suppressing the descent in the text lines or set display: block for all images thus moving them out of inline formatting context into block formatting context.
I was able to get the effect you are looking for with the following code:
The code depicts four solid colored jpegs right next to each other forming a square with no space inbetween:
<html>
<head>
<style>
td { margin 0px; padding: 0px;}
table { border-collapse:collapse;}
</style>
</head>
<body>
<table>
<thead />
<tbody>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
</tbody>
</table>
</body>