I have to make a table with scroll property on all the table columns in the table. but it is not fixing the height of the table and also not giving the scroll property to the data.
<table>
<tr>
<td valign="top">
<h3>Latest Reviews</h3>
<p><b>This gives the latest riview posted on the website</b></br></p>
<p><b>This gives the latest riview posted on the website</b></br></p>
</td>
<td valign="top">
<h3>Top Rated</h3>
<p>9.3/10</br></p>
<p>8.3/10</br></p>
</td>
<td valign="top">
<h3>Recipes</h3>
<p><b>Recipe Title</b></p>
<p><b>Recipe Title</b></p>
</td>
</tr>
</table>
The related CSS code goes here:
table{
width:100%;
}
td{
width:30%;
height: 100px;
display: block;
overflow-y: auto;
}
After all this the table has height equal to the column with max height. Someone please solve this.
Related
I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.
there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.
when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.
jsfiddle
<table>
<tr>
<th colspan="3">title text</th>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
<td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
</table>
table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}
table td{
padding:2px 5px;
}
table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}
table tr:hover td
{
background-color: #ebf1f6;
}
I had a similar requirement: apply a background color on a table row, as I hovered over the row with the mouse pointer, except on a 'selected' row, that was already highlighted in a different background color.
Using 'pointer-events: none;' achieved exactly what i wanted: JsFiddle
table#CustOrders tbody tr:hover td {
background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
background-color: Yellow;
pointer-events: none;
}
The first thing that came to my mind is using "pointer-events" css property. But I am not sure if it is useful here. Check this link (there is a jsFiddle example available)
Also think about using some javascript code to set the logic you need. I understand that you want to use css only, but js fix can be quite small and obvious here - so why not ?
you can check Answer
HTML
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2" scope="row">title text </td>
</tr>
<tr>
<td width="75%" scope="row">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
</table>
</td>
<td width="25%">Purchace</td>
</tr>
</table>
CSS
.amount_table tr:hover{
background:gray
}
I have a ASP.net web page I'm working with, I didn't create it myself, with the following HTML code:
<DIV style="POSITION: absolute; TEXT-ALIGN: center; WIDTH: 1400px; TOP: 60px; LEFT: 125px">
<SPAN style="TEXT-ALIGN: center; FONT-SIZE: xx-large" id=labelInstructions>Some Text: <BR><BR></SPAN>
<TABLE style="WIDTH: 1200px" border=1 align=center>
<TBODY>
<TR>
<TD><LABEL style="FONT-SIZE: x-large" for=FileUpload1>ENTER Path: </LABEL><INPUT id=FileUpload1 size=70 type=file name=FileUpload1></TD>
</TR>
<TR>
<TD><SPAN style="COLOR: red; FONT-SIZE: medium" id=fileUploadError><BR><BR></SPAN></TD>
</TR>
<TR>
<TD>
<TABLE style="WIDTH: 1200px" border=1>
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
When this html is displayed in IE, I notice that the alignment of the text in the cells in the inner table, i.e. the table that is in the third cell of the outer table, is distorted when zooming in and out on it. I have a fixed table setting in pixels instead of percentages, so I don't understand why this is an issue. I want the text in the cells to stay in the same
position when zooming. The code must be manipulated from the code behind, so I cannot create a separate CSS file. Any help is appreciated.
Here are two examples to illustrate what I'm talking about:
Normal zoom at 100%:
Zoom at 75%:
Notice in the second image the two table cells at the bottom are slightly offset to the left.
UPDATE:
Yes, I understand, we will be implementing a new system in the near future. Obviously this is old and very non-standard, this was dropped in my lap when I started working with it. And we're coming up with plans for a new system to replace it, in the meantime, this is what I have to deal with.
(1) There's a problem with your nested table...
<TBODY>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
<TR><TD></TD></TR>
<TR>
<TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
<TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
</TR>
</TBODY>
The format of this inner table is:
Row 1: Two cells.
Row 2: One cell.
Row 3: Two cells.
You need to have an extra td in row #2. (I'd say use colspan, but I'm not sure if IE does that correctly either.)
(2) I don't know how to fix that, but my guess would be that it will require javascript or disabling of the zoom feature (last I heard, the latter is not possible, though. I could be wrong there.) I haven't read the entire thing, but this MSDN article seems like a great place to start. It looks like you can detect the browser's zoom factor. If it's not equal to 1.0, you could try to get javascript to resize things in order to get the td's to their intended location.
(3) It isn't recommended that you use tables for content alignment. (I suppose this would be a good reason why.)
Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.
Firefox:
Internet Explorer:
UPDATE:
Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.
<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
<span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
<table style="width: 1000px;" align="Center" border="0">
<tbody>
<tr>
<td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
</tr>
<tr>
<td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
</tr>
<tr>
<td style="width: 1000px;">
<table style="width: 1260px;" border="0">
<tbody>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
<td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.
UPDATE 2:
When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.
All you have to do is make the table columns the same width as each other.
Example of style:
table tr td:first-child { background-color:yellow; width:200px; }
HTML:
<table>
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
<tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>
Sorry for not directly answering to your question, but...
Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).
Seperate Content and Layout, use CSS.
Make sure to place the the parts that you want to align together in one table.
<table id="layout">
<tr><td>HEADER</td>
<tr><td>
<table id="form">
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
<tr><td>LABEL</td><td>INPUT FIELD</td></tr>
</table>
</tr>
<tr><td>FOOTER</td>
</table>
i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like
.left{width:100px; text-align:right;}
heres an example
Like happens to all of us sometimes, I inherited some crappy code I have to fix.
We need to center our pages on widescreen machines, so we have a master page layout div like so:
.MasterLayout
{
width:1100px;
height: 100%;
position:absolute;
left:50%;
margin-left:-550px;
vertical-align:top;
}
I removed most of the detailed attributes for readability here, but here's how the table for the master page is laid out:
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td style="width: 100%" align="center" colspan="2">
</td>
</tr>
<tr>
<td colspan="2" style="height: 20px; background-color: #333;">
<asp:SiteMapPath/>
</td>
</tr>
<tr>
<td style="width: 86px; height: 650px; background-color: #B5C7DE; margin: 6px;" valign="top">
<asp:Menu />
<asp:SiteMapDataSource />
</td>
<td style="background-color:#ffffff; margin:5px; width:1000px;" valign="top">
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server"/>
</td>
</tr>
</table>
When resizing the browser window, the horizontal scrollbar only reaches as far as the left edge of the <asp:contentplaceholder/> control, and the <asp:menu/> that's in the 86px wide <td> is hidden. How can I fix this problem? THANKS IN ADVANCE
Try centering the .MasterLayout using margin: 0px auto instead of the negative margin method.
While you're updating the code, you might also consider using divs instead of tables for page layout.
Put contentPlaceholder in a div and control the overflow with css overflow property of that div. I suggest you to use width of main block like #masterlayout, #sidebar in %.
I have a table based layout, with one main two-column table, for left and right sides of a form. Each column contains an inner, two-column table, with a label and and input column, and each field on its own row.
Could I use CSS to set the width of both the input columns?
E.g.
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td>Surname</td>
<td><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
In the table with class "formColumn", I want to set the the width of the second <td>, with the server controls. I would prefer to do this without assigning a class to every second <td> in my field lists.
The best solution around: use col tags!
<style> .col2 { width: 200px; } </style>
...
<table class="formColumn">
<colgroup>
<col></col>
<col class="col2"></col>
</colgroup>
<tbody>
<tr>...
</tbody>
</table>
Another IE6-unfriendly solution is
.formColumn td:last-child { width: 200px; }
If you're not stuck on CSS, you could use col groups
<table class="formColumn">
<colgroup>
<col />
<col width="200px" />
</colgroup>
<tr>
<td>Surname</td>
<td><asp:textbox..../></td>
</tr>
</table>
Usually, you could do:
table.formColumn tr td:last-child { width: 200px; }
but IE7 does not recognize last-child, so you might have to go with
table.formColumn tr td+td { width: 200px; }
IE6 does not recognize the + selector, according to quirksmode.org.
If you're planning on supporting IE6, I don't have a solution for you,
with your current markup.
That aside, some argue that you should not use tables to design the layout
of your website. That second table (formColumn) could've been replaced with
something like this:
<fieldset><label ...>Surname</label><YourTextInput /></fieldset>
If you want to set them to the same width it's easy:
table.formColumn td {
width: 150px;
}
If you want them to be different widths, it's a bit more problematic but not hugely so. Easiest option is just to assign a class to the td elements in the first row:
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td class="left">Surname</td>
<td class="right"><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
then:
table.formColumn td.left {
width: 150px;
}
table.formColumn td.right {
width: 300px;
}
Since the rest of the column will take those widths.
You could also use the + selector, but it's not supported in IE6:
table.formColumn td {
width: 150px;
}
table.formColumn td + td {
width: 300px;
}