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.
Related
I have a very simple situation that I can't for some reason resolve. In ASP.NET I am trying to align the textbox inside the inline table with the text so that the text will point at the middle of the textbox, not at its foundation
Here is the markup
<span style="margin-bottom:10px">This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:bottom;padding: 0; margin: 0;">
<input name="TextBox1" type="text" id="TextBox1" />
</td>
</tr>
</table>
Here is the css
.inlineTable {
display: inline-table;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
Here is how it looks
As it is seen in the attachment, the text points at the base. How can I move the textbox a bit down so that the text would point to the middle of the left side?
Thank you very much in advance
try vertical-align:middle on the table
.inlineTable {
display: inline-table;
padding: 0;
}
table{
vertical-align:middle;}
<span >This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:middle;padding: 0; margin: 0;">
<textarea ID="TextBox1">hi</textarea>
</td>
</tr>
</table>
I'm working on my ASP.NET project (written in C#).
I can't code div to have the correct size for the text inside him. I want to have a div to capture the text well and resize itself when I shrink the page.
Can somebody help me, please?
Here is a photo with what happens.
Css code:
.box {
width: 500px;
height: 500px;
border: 1px solid #e0e4e8;
padding: 20px;
border-radius: 10px;
height: 100px;
color: #717171;
float: left;
position: relative;
display: block;
}
Html code:
<div class="box">
<p class="date">Datele contului</p>
<br />
<table class="profil">
<tr>
<td>Nume:</td>
<td>
<asp:Label ID="lblNume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Prenume:</td>
<td>
<asp:Label ID="lblPrenume" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
<hr />
</div>
Just remove the height attribute in css. (or)
Try Setting height to auto.
You have set height twice in your css. Remove Both.
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%;
}
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.