I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
Related
On the main page of my website I have a problem concerning the two inputs located at the top right of the page ("Rechercher" text field and "OK" button).
In fact, my CSS works on FF & IE but not on Chrome.
To make it more generic, it's just two input in a div.
Can you help me to correct this misbehaviour on Chrome?
Thanks a lot guys!
CSS of the "Rechercher" text field:
#champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}
CSS of the "OK" button:
#habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}
CSS of the div:
#encart_recherche_style {
padding-left:746px;
text-align:center;
width:210px;
}
In general, tables are terrible for layout, but if you MUST use them, just put your button in a TD after the input's TD instead of putting the input field in a table by itself and attempting to force the table to display inline.
I highly suggest learning how to use CSS for your layouts in the future.
Again, I don't recommend tables for layout, but...
Instead of:
<table>
<tr>
<td> INPUT IS HERE </td>
</tr>
</table>
BUTTON IS HERE
Try this:
<table>
<tr>
<td> INPUT GOES HERE </td>
<td> BUTTON GOES HERE </td>
</tr>
</table>
Using inline-block instead of inline on your table will get you closer to the behavior you want.
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 need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a <table> with <thead> and <th> tags.
Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.
In Firefox it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. If I remove the background image of <th> then the background image of <thead> appears.
Any suggestion?
EDIT:
Here is my simplified code:
<table>
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
<th>CCCC</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody>
</table>
<style>
thead {
background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
}
th {
background: url(PATH TO MY IMAGE) no-repeat left center
}
</style>
Starting from this question and modifying the answer:
<style>
table {
border-collapse: collapse;
background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
}
tbody {
background: #fff; /* This covers up most of the <table> background */
}
th {
background: url(PATH_TO_TH_IMAGE) no-repeat left center;
}
</style>
Gives a reasonable approximation of what you're probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn't check Opera/Chrome/Safari/IE8 though.
You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don't litter your CSS with IE7 kludges.
This is just one of IE's table-related bugs...
I suggest adding display:block; to thead, or styling "thead tr" instead.
This isn't a complete solution, but I can't post comments yet.
IE seems to apply the thead rules to the th elements. Change the 'repeat-x' to 'no-repeat' and set the width for th and td to something much wider than your background images and remove the th background image. You'll see the thead image repeated in each th ... So when you enable the background image for th, you're essentially overriding thead's background image. This is definitely not correct behavior, but there you go.
So, if you can, the best option might be to just back off and get that background image in there some other way. Maybe you can apply it to the table instead and use 'top' to position it?
I'd like to create a table that looks like this:
lolvalue---------|lol date|some other column data 1
lolvalue12345|lol date 2|some other column data2
in CSS/HTML. Basically, there is "data" and there is a filler that goes to the right, but doesn't count as data, so it doesn't stretch the column, filling the space stretched by the max-length row.
It's like in those old content books where there were dots guiding us to the right page, remember?
How could I do that? There is no property like "padding-backgrond". I can probably create this by using layers for only one column but then, how do I determine the width of the layer?
Another approach would be to generate appropriate amount of characters within software, but hmm, that wouldn't be portable across fonts and browsers.
I use Ruby on Rails for server-side, if it makes a difference.
You could add a background-image to your td and wrap the inner text with an inline element such as a span and style that with a background-color:
<style type="text/css">
td { background:url(dot.gif) 0 0 repeat-x; }
td span { background-color:#fff; }
</style>
<table>
<tr>
<td><span>loltext</span></td>
<td>loldate</td>
</tr>
<tr>
<td><span>lolvalue12345</span></td>
<td>lol date</td>
</tr>
</table>
This way, you wouldn't need to assign a width.
A quick cheat I've used in the past is to flood all the fields with the trailing characters (like '------------------...') and then hide the overflow with with css.
<table>
<tr>
<td>lolvalue------------------------------------</td>
<td>lol date</td>
</tr>
<tr>
<td>lolvalue12345-------------------------------</td>
<td>lol date</td>
</tr>
</table>
And then style it with:
td { width:50px; overflow:hidden; }
css:
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; }
.words { background: none; }
markup:
<div class="extendo"><span class="words">lalala</span></div>
you may need to specify padding or alternate background