I have a table with two columns. The left side us usually 1 word, and the second one with a bit more text. When I have too much text on the second column, the first one expands and center the text.
How do I remove this unwanted padding so the text will be on the top-left?
add css in td or in .tlt vertical-align:top
Inside a table-row, the two cells have always the same height. It shows as a padding, but it's automatically applied.
As some users mentioned, you can set a vertical-align: top; for the cell, and than play with padding top to position the text.
in ALL browsers, the browser will make padding and margin between all the things. to remove that and control the page yourself add this add the first line of your css:
* {margin:0 auto; padding:0}
auto makes all the things (except text and images) at the center of your page.
and for your table if you want texts to be on top of your td, add this:
.tlt{vartical-align:top; text-align:left;}
Just Select your Class via .tlt and add vertical-align:top you don't need to do anything more since for your .tlt just padding-right has been added so that there will be a space between two columns.
CSS
.tlt{
vertical-align:top;
}
Add it at the end of your Css Code.
Related
I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
In this table, i have a table with 3 images: left, topcenter and right.
the topcenter td row is 126px, but the content image is 122px.
i tried with overflow: hidden, by giving the td a css-fixed height, but this thing just wants to have 126px height.
you can verify it by the box-shadow under the topcenter image.
it should stick at the image, not 4px below.
i am stuck here, i guess someone else sees this in 10 secs, so pls help me.
http://jsbin.com/fonemeqohe/1/edit?html,output
Set display: block; or vertical-align to topcenter image:
img {vertical-align: bottom}
OR
img {display: block;}
Try setting the line-height of the td to 0.
you need to have the same number of cells in each row
your second (top center) cell has width 100% which is nonsensical
all cells in a row have the same height, that's the concept of a table
My two cents - stop using tables for layout and appearance, they are for data only. Use inline-block divs, for example, or float: left for divs. Or just place your images next to one another, whatever you need.
EDIT: Or combine those images in a single one and use it as a background-image for the body (or any other element suitable for your needs).
I am using table-cell arrangement of div blocks in my code. There is a problem in my code.
Preview of how my html looks is here
When I have any content (text or image) in my first panel then the .inner div of the second and third panel have a top margin of some 10-15 pixels. Why is that ?
Can any one look and let me know what I am missing.
add vertical-align:top; in #wrapper > div
See Demo: http://jsbin.com/avozik/14/edit
I have a similar case, and vertical-align:top; solves the issue. However I want to elaborate reason behind this:
https://jsfiddle.net/46tyc48y/1/
Because table cells uses vertical-align:baseline; by default, the right cell text will align to the baseline(bottom) of the image, creating the phantom spacing on the top. So we need to explicitly set vertical-align to bypass this behavior.
I have a list of div displayed on the same line. When the page is not wide enough to display all the div on the same line, I don't want extra div to be displayed on the next line. How can I avoid displaying extra div on a new line?
Here is a jsFiddle: http://jsfiddle.net/YCFZM/
Try to reduce width on the page and you'll see some div displayed on a new line.
Thanks.
Updated gist with solution: http://jsfiddle.net/Meligy/YCFZM/16/
Main changes:
Removed extra quote in HTML at id=""sidebar" which was breaking the gist
Removed height: 0px; from div#sidebar CSS
Added white-space:nowrap; to div#sidebar CSS
Removed float:left from div.sidebar-item CSS
Added white-space: nowrap; display:inline-block; to div.sidebar-item CSS
Optionally you can also remove text-align:center; from div#sidebar CSS if you meant to make the text be to the left.
In the style sheet use the display attribute with the inline value on the doc
As far as my knowledge goes the only solution to this is to have a fixed width for the container. Or to have an element in the container which has a fixed width
You need to set a min-width which is large enough to encompass the divs. Also, you had an extra quotation mark in your jsfiddle which was preventing your styling from being applied and for some reason the height property was set to 0. I've adapted your jsfiddle here to display the behaviour I think your after.
Say I have something that looks like this: http://jsfiddle.net/Dtsjh/
How do I align the numbers in each cell to be in the top-left corner of each cell - without aligning the words?
Preferably in just HTML/CSS - but if you can't do it any of those, then jQuery is fine.
td {
vertical-align: top;
text-align: left;
}
put the above css for the row of the table..And it works.
If you want specific to that td, put the id of the td in css.
Wrap the number in a <span>, float it to the left, and give it a negative top margin to push it up into the corner: http://jsfiddle.net/ambiguous/chp8y/
You'll have to fiddle with the pixel values on the .sit-in-the-corner margins to get something that works for you.
In the TD tag you can use the align="left". Inside of the style attribute you can also try and add a horizontal alignment or text-alignment:left. Try to add a div, and a span inside a div for some more complex alignment with the style attribute style="text-align:left;".
see link: link text