I want the table with borders to show inside the list view.I used html table inside list view,but I cant get the border lines(rows and columns)(tried border="2").I tried to get the border using css also,but I cant get the table lines.
code:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<table id="Table1" border="2" runat="server" class="TableCSS">
<tr id="Tr1" runat="server" class="TableHeader">
<td id="Td1" runat="server">OwnedBy </td>
<td id="Td2" runat="server">Sharedclass </td>
<td id="Td3" runat="server">EffectiveInterest </td>
<td id="Td4" runat="server">DeemedInterest </td>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<asp:listview>
css:
.TableCSS
{
border-bottom-width:thin;
border-left-width:thin;
border-bottom-color:Black;
background-color:Red;
width:auto;
}
.TableHeader
{
border:12px;
background-color:black;
color:Snow;
font-size:11px;
font-family:Verdana;
height:auto;
text-align:center;
}
To see the table lines, set background for the table and give cellspacing="1"(Add cellspacing attribute to your Table tag) and apply the background color for all TD tags inside table.
Notice that the class you gave the table is not the same as what you declared in your css (i.e. class="Table" VS .TableCSS)
Also, you can declare a header for each column with <th>.
Use Gridlines. http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.table.gridlines.aspx
Inside <td> hard code the styling as:
style="border: thin solid #C0C0C0". Change the border color as you want.
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
}
This is my table:
<table width="100%">
<tr ><td width="35%" height="30" class="left-info" >Criminal Id :</td>
<td width="65%" class="right-info" >CR7887898652</td></tr>
<tr><td height="30" class="right-info" >Full Name :</td><td class="left-info" ></td></tr>
<tr><td height="30" class="right-info" >Date of Birth :</td><td class="left-info" ></td></tr>
</table>
How can I remove these repeating use of class for each table data. As, I've used class="left-info" for left side table data and class="right-info" for right side table data. But, this make the mesh of coding, can anyone suggest me how can I do the same style with minimal code?
You can either switch to a non-table layout (perhaps a DL may suit your needs better), or if you must use a table, consider using the col element, which you can apply a class attribute to.
Example
Using your example above, this is how I would suggest using the col element.
<table id="example">
<col class="label" />
<col class="value" />
<tr>
<td>Criminal Id :</td>
<td>CR7887898652</td>
</tr>
<tr>
<td>Full Name:</td>
<td>Foo Bar</td>
</tr>
<tr>
<td>Date of Birth:</td>
<td>01/14/1983</td>
</tr>
</table>
But, taking into account your example, I think you could accomplish your goal with better semantics and less code if you make use of TH elements and pure CSS:
#example th {
text-align: right;
font-weight: normal;
}
#example td {
text-align: left;
}
...
<table id="example">
<tr>
<th>Criminal Id :</th>
<td>CR7887898652</td>
</tr>
<tr>
<th>Full Name:</th>
<td>Foo Bar</td>
</tr>
<tr>
<th>Date of Birth:</th>
<td>01/14/1983</td>
</tr>
</table>
At this level, it shouldn't really matter if you use a DL or a TABLE as they both are semantically rich elements when used like this. IMHO, I still prefer a DL, but truthfully they can be more difficult to style.
In the following snippet of code, the width percentage attribute of the td tag seems to be ignored in Firefox/IE, etc. So both "Password" and the textbox get half the row, which is a waste of space. Is there something flagrantly wrong with the below snippet:
<table align="center" width="80%" cellpadding="0" cellspacing="0" class="loginBg">
<asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">
<tr>
<td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%">Username</td>
<td style="padding-right:0px;width:70%" align="left"><asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
</tr>
</asp:Panel>
</table>
Also, I'm doing styles in line because this is a very bare page that is only used to populate an iframe in another web application.
Thanks in advance for any tips.
EDIT: Added some code to clarify context.
EDIT 2: I removed the asp:Panel and the width proportioning seems to work now...but only when the iframe or browser window is 300+ pixels wide. In really small browser windows/frames, it forces both s to be 50%. Truly bizaree.
It seems that ie and table widths don't play nicely together.
What you can do to enforce a minimum width for your table is to add an extra row to your table which spans all columns which has a width of the minimum size that you desire. This will then enforce your td percentages when the broswer is resized or your iframe is small.
Like so:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
.min500
{
width: 500px;
height: 1px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table align="center" border="1" cellpadding="0" cellspacing="0" class="loginBg">
<asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">
<tr>
<td colspan="2">
<div class="min500"></div>
</td>
</tr>
<tr>
<td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%;">
Username
</td>
<td style="padding-right:0px;width:70%;" align="left">
<asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
</tr>
</asp:Panel>
</table>
</form>
For one thing, put your validator inside a <td>.
Secondly -- check for width settings in other rows' <td> styles -- you might have conflicts.
Does it happen if you take the textbox out?
Shouldn't the <asp:RequiredFieldValidator> be inside one of the <td>s?
edit: And the <asp:Panel> between the <table> and the <tr> probably isn't helping. That is, you shouldn't have extra controls/tags in your table that arent supposed to be there. Something like an <asp:Panel> should either wrap the whole table or be inside one of the <td>s.
edit: in short, the tags as arranged will generate invalid html and so all styling bets are off.
I was having big problems with this in ASP.NET. Using a colgroup tag in the table resulted in a page source back from IIS WITHOUT that group. As you may guess the table just did what it wanted at that point. After figuring out the problem may have been needing the runat='server' attribute on colgroup as it was on the parent table, I encountered a no compile situation. What finally worked for me was a typical kludge of putting the desired cell widths on the tags of the first row. PROBLEM: The first real row of the table had cells that spanned columns so a dummy row was required. Now, how to hide that?
Set the table to have fixed width and layout style:
style="width: 800px; table-layout: fixed"
Then use a first row something like this for the least amount of code that seems to work (use widths that add up to your table width):
<tr id="DummyTableRow" style="line-height: 0px" runat="server">
<td style="width: 200px; border: none"> </td>
<td style="width: 200px; border: none"> </td>
<td style="width: 400px; border: none"> </td>
</tr>
So others don't bother trying them, a list of failed attempts:
This won't work or any combination of trying to do it with the td tags:
<tr runat="server" style="display: none">
This won't work or any combination of trying to do it with the td tags:
<tr runat="server" visible="false">
This sort of worked, but left a blank row:
<tr runat="server" style="visibility: hidden">
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
I have been searching the net about border-collapse. And it seems it does not really collapse the border on nested table. I wrote a sample HTML and it seems to be ignoring border collapse.
I found a related question here but it seems it is not solved. link text
<html>
<head>
</head>
<body>
<p>dsafhidsljfalkdsjfklsdajfkjsdakl jdsfjasdklfasdkljfkl</p>
<table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
<table style="border: solid 1px #000000; border-collapse: collapse;" cellpadding="0" cellspacing="0">
<tr>
<td>
A
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
B
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Supplementary Info (based on somacore and moo's comment):
I already used the "border: none" in the internal table to solve this problem. But on some designs, it is not just one nested table. For complex web pages, it needs upto 3 to 4 nested table levels to design the GUI. And inside those nested tables, not all cells uses border. I had just used a simple example for the problem.
Is there any other solution that hand picking merging adjacent borders to one?
border-collapse works on the td and tr elements within a table.
And like somacore stated... why not turn off the border on the second table? (or why not use real markup?)