So I have this certain table. I know I'm not supposed to use table for layout, but in this case I'm forced to.
I need to style a specific TD's cell-spacing (the TD with the class .ritey). I know I have to target the TABLE to set its cell-spacing, but I don't want other TDs got affected. I only need to style this single TD.
Is there any way to do this?
Here is a quick rough sketch with MS Paint, I hope this explains what I need:
In the overall layout there will be multiple rows (multiple TR). In this question I only show one row. I need all columns (all TDs) to remain unchanged, except for .ritey. I want .ritey to have 10px margin around it (margin, not padding). I hope this explains better!
.
And here is what I got in my HTML. I tried td.ritey { border-spacing:10px; } but it does not seem to work.
<table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
<tr>
<td valign='middle' class='row4 uname' colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr><tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td><td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr></table>
Any help is really appreciated.
See fiddle for code and demo
fiddle: http://jsfiddle.net/kDKEw/2/
demo: http://jsfiddle.net/kDKEw/2/embedded/result/
HTML:
<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
<tbody><tr>
<td valign="middle" colspan="2" class="row4 uname">
<div class="name">
Guest
</div>
</td>
</tr><tr style="height: 36px;">
<td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
<div class="postcolor">
Post content
</div>
</td><td valign="top" class="lefty" style="float: right; width: 6%;">
<div class="postdetails">
Details
</div>
</td>
</tr>
</tbody>
</table>
SS:
Updated Fiddle as per image illustration ( http://i.imgur.com/o56CD.png ): given by deathlock
Fiddle: http://jsfiddle.net/7xfxF/1/
Demo: http://jsfiddle.net/7xfxF/1/embedded/result/
SS:
In CSS, you would use padding for cellpadding and border-spacing for cellspacing. Here's the working code:
EDIT
I revised the CSS according to the image you provided. I added extra styling for the postcolor class. See the updated CSS and Fiddle. I also updated the screenshot.
If you want the borders to collapse, change border-collapse to collapse and remove the border-spacing property.
<style type="text/css">
table.postable {
border-collapse: separate !important;
border-spacing: 1px;
}
table.postable td {
border:1px solid black;
padding: 5px;
}
td.ritey {
border: 0px !important;
padding: 10px 5px 10px 5px !important;
}
td.lefty {
padding: 10px 5px 10px 5px !important;
}
div.postcolor {
margin: 3px;
padding: 10px;
border: 1px solid black;
}
</style>
<table width='100%' class='postable'>
<tr>
<td colspan='2'>
<div class='name'>
<a href='#'>Guest</a>
</div>
</td>
</tr>
<tr>
<td width='100%' valign='top' class='ritey'>
<div class='postcolor'>
Post content
</div>
</td>
<td valign='top' class='lefty'>
<div class='postdetails'>
Details
</div>
</td>
</tr>
</table>
OUTPUT:
See this jsFiddle for a demonstration.
Related
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
Hi I know this is a simple question. But I am unable to do it. I want to place images in a table. Everything is working fine in a new html file. But when I am trying to insert the table in my project file, the images are getting overlapped.They are not fitting in a table. What mistake am I doing? Kindly look at the image that is attached.
table,td,th {border: 3px solid black;padding: 15px}
<table>
<tr><th>Choose from the icons</th></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png' width='20%'/></td></tr>
<tr><td ><img src='http://www.freeiconspng.com/uploads/smiley-icon-1.png'width=20%/></td></tr>
</table>
Try:
table,
td,
th {
border: 3px solid black;
padding: 15px
}
img.icon {
width: 20%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
this may works. if you have any query, you can comment and ask further.
this solution fix your image inside <td>
table,
td,
th {
border: 3px solid black;
padding: 15px
}
td img {
max-width: 100%;
height: auto;
}
<table>
<tr>
<th>Choose from the icons</th>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
<tr>
<td>
<img src='heart1.png' class="icon" />
</td>
</tr>
</table>
First you should always specify both height and width.
Second you should specify the width in pixels. AFAIK, the image tag does not support percentages.
IMG tag
Third, your second image does not have quotes around the width value.
Ideally you should resize the image to work without a width and height defined.
The best way might be to set the image as the background image of the cell.
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
I have created nested tables with the following markup, where the first table contains an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
In Firefox this renders like this:
but in IE6 it renders like this:
Two things are going wrong in IE:
The right hand border is missing from every table.
The 2nd and 3rd tables in the right hand column have arbitrary sizes for the last column despite the fact that these cells are class "image" and should have a fixed width of 75px.
Any advice is greatly appreciated.
EDIT: #rightColumn table, #leftColumn table { width: 100%; background: Red }
Check whether IE is rendering your page is in quirks mode or not. Quirks mode often affects element widths in particular, so I would suggest that this is a very strong candidate for the cause of your problem.
You should make sure the page is in standards mode in order to render correctly.
This is easily done by making sure the page has a valid doctype at the top of the page.
If you don't have a doctype, you can add any valid doctype to get it working in standards mode, but if you're not sure which one to use, just use the following:
<!DOCTYPE html>
Hope that helps.
I have a div in the html and after the Div and I have another div which contains the HTml table Which is coming on the top of div. How to bring the table down.
<div id='testupdate2' >Mynumber: ". $num." </div>
<div id="test">
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tbody>
<tr>
<td id="Header" class="navUPD">MY number</td>
</tr>
<tr>
<td id="tls" class="navUPD">MY DETAILS </td>
</tr>
<tr>
<td id="mgmnt" class="navOFFTDUPD"> ADDR. MGMT </td>
</tr>
</tbody>
</table>
</div>
How to bring the table down to the DIV?
To push your table off the top of your <div id="test"> you can use CSS padding:
#test {
padding-top: 20px;
}
Or alternatively:
#test table {
padding-top: 20px;
}
If you have something else in <div id="test"> except that table and you want to table be always aligned to bottom of the div, you can do something like this in your CSS
#id{
position: relative;
}
#id table{
position: absolute; /*this is absolute to #id not to body tag*/
bottom: 0px;
left: 0px;
}
This should do the job, I think (I didn't check it).