why does :
<table style="border:1px solid black; " class="table-bordered table-striped table">
<colgroup>
<col id="Col1" />
<col id="Col2" />
<col id="Col3" />
<col id="Col4" />
<col id="Col5" />
</colgroup>
<thead>
<tr>
<th style="border:1px solid black;" scope="col">#T("Code")</th>
<th style="border:1px solid black;" scope="col">#T("Product")</th>
<th style="border:1px solid black;" scope="col">#T("Unit Price")</th>
<th style="border:1px solid black;" scope="col">#T("Quantity")</th>
<th style="border:1px solid black;" scope="col">#T("Value")</th>
</tr>
</thead>
<tbody>
look like:
I want to show all the borders of all the cells?
Should the style in the <table> have done this?
When using css you can set the border of a table and it's cells like this
table, th, td
{
border: 1px solid black;
}
Use border="1" in your table like this <table border="1">
Demo JsFiddle Using border="1"
Demo JsFiddle Using style="border:1px solid black;"
There is a difference between Table border and css border. To apply border to each cell you have to use Table border using table property called border or apply css border to each cell of the Table. To learn more please visit following LINK
Related
I am trying to figure out why the width of the input textbox on the 3rd column isnt spanning across the full width of the . I have set the width to px/% yet it still does not work. Here is a snippet of the code i have and how it is coming out.
What i am wanting the outcome to be is for the input text in the 3rd column to span entirely across that td
i guess you got that problem from the width you placed in the td and not in the entire column
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<table class="table table-bordered">
<colgroup>
<col width=150px>
<col width=150px>
<col width=450px>
<col width=170px>
</colgroup>
<tr class="text-center">
<td><label for="">1</label></td>
<td><label for="">2</label></td>
<td><label for="">3</label></td>
<td><label for="">4</label></td>
</tr>
<tr>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="search" class="form-control"></td>
<td><input type="text" class="form-control"></td>
</tr>
</table>
</div>
check this.
Using style attribute I want to show the cell borders of a table;
<table class="table-bordered table-striped table">
<colgroup>
<col id="Col1" />
<col id="Col2" />
<col id="Col3" />
<col id="Col4" />
<col id="Col5" />
</colgroup>
<thead>
<tr style="border:10px">
<th scope="col">#T("Code")</th>
<th scope="col">#T("Product")</th>
<th scope="col">#T("Unit Price")</th>
<th scope="col">#T("Quantity")</th>
<th scope="col">#T("Value")</th>
</tr>
</thead>
<tbody>
ATM looks like:
Tried something like:
<tr style="border:10px; border-style:solid; border-color:Black;">
but no joy
If you want the border on the cell, then add it to the cell not the row.
CSS:
td {
border: 1px solid black;
}
or inline:
<td style="border: 1px solid black;"></td>
if you want to display border of each cell then you need to just add an style attribute with following value :
<td style="border:1px solid Black;"></td>
syntax of the border property is :
border: width|style|color;
where value of style are :
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
As others have mentioned you probably want to style the td, not the tr. However, your styling of the tr should show something, so my guess is that your styles are being overridden from another css file, or something. Use Fire Bug, or Dev Tools in Chrome (Right click > inspect element) and you can see the styles on your td's. You can then see which are being overridden (1), which are being applied (2), and where they are coming from (3).
On Combo box selection change event i set the visible property of table and row to hide the message. But its not working.
Here is my code :
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
<telerik:RadPageView ID="RadPageViewCaregiver" runat="server">
<div class="container">
<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="-1" HideEvent="ManualClose"
Width="200px" Height="250px" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
Position="MiddleLeft" ManualClose="True" ShowEvent="OnClick">
</telerik:RadToolTipManager>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td align="center" valign="top" style="width: 100%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="30px" valign="top" id="trmessage" runat="server" visible="false">
<td valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="98%" id="tbluser" runat="server"
visible="False">
<tr id="Tr1" runat="server">
<td id="Td1" align="left" runat="server">
<asp:Label ID="lblmessage" runat="server"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
I also tried to set the style for display to 'none' instead of visible to 'false' but it doesn't work either.
Can you give Any solution??
try display property to hide table. try this set of code.
tblAssignPatientMessage.Style.Add("display","none");
if the table style is set to be none then the tr style will also set to be hidden. if that doesn't work try this
trAssignPatientParentRow.Style.Add("display","none");
use this set of code to make the table visible.
tblAssignPatientMessage.Style.Add("display","block");
and for tr add this.
trAssignPatientParentRow.Style.Add("display","block");
and make sure that your table is not using any cssclass.
I have a table similar to the one below which I would like to convert into an rss feed somehow. What is the best way to approach this? Should I be scraping the contents and trying to build up an rss or is there a much simpler annd easier way (I'm hoping)? I'm using the asp.net / c# - anyone point me to any tutorials out there that will help me achieve this would be great:)
<table align="left" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="width: 125px; height: 125px;" colspan="1"><img title="Costa Rica" alt="Costa Rica" src="/CR_sq.jpg?n=4185" /></td>
<td align="left" valign="top" colspan="1"><strong><font color="#fff" size="2">Costa Rica <br /></font><span class="SubHeadingGrey_7_0">16 August 2012</span></strong><br /><br />Some Text Here <a title="...read on" href="/WorkArea/linkit.aspx?LinkIdentifier=id&ItemID=1234">...read on</a></td>
</tr>
<tr>
<td align="left" valign="top" style="width: 125px; height: 125px;"><img width="117" height="117" title="South Africa" style="width: 117px; height: 117px;" alt="AL 2012 Icon" src="/SA2012.jpg?width=117&height=117&mode=max" /></td>
<td align="left" valign="top"><p><strong><font color="#fff" size="2">South African Story<br /></font><span class="SubHeadingGrey_7_0">16 August 2012</span></strong></p>
<p>This is summary text <a title="... read on" href="/SA.aspx">... read on</a></p>
</td>
</tr>
<tr>
<td align="left" valign="top" style="width: 125px; height: 125px;"><img title="ITALY" alt="ITALY" src="/Italy.jpg?n=43" /></td>
<td align="left" valign="top"><strong><font color="#fff" size="2">Italian Article<br /></font><span class="SubHeadingGrey_7_0">15 August 2012</span></strong><br /><br />Italian Visit Article<a title="...read on" href="/WorkArea/linkit.aspx?LinkIdentifier=id&ItemID=1256">...read on</a></td>
</tr>
</tbody>
</table>
As long as the html is well formed and matches XML you can read it in as xml and then use XSLT to convert it to an rss feed using XslTransform here is a simple example of how to use xlsTransform http://www.xmlfiles.com/articles/cynthia/xslt/default.asp
I would not say I wasted my time, but spent around few hours changing this. But in vain. Could some one please help me out.
In the following code:
I need to use break in between Disable Location(Title) and the gridview
I want the border color of grid to none. I do not want any color.
I want both the buttons Disable or deactivate and Cancel to be displayed just below the gridview. and in the middle of the page.
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;
border-left: #88b9c7 1px solid; border-bottom: #88b9c7 1px solid; border-top: #88b9c7 1px solid;
border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px;
height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr>
<td align="center" colspan="5" style="font-weight: normal; font-size: 20px; margin: 0px;
font-family: Arial; color: #1e7c9b;">
Disable Location</td>
</tr>
I need number 1 over here..
<asp:GridView ID="disableloc" runat="server" AutoGenerateColumns="False" DataKeyNames="LocationName"
DataSourceID="" AllowPaging="True" EnableViewState="true" BorderStyle="None">
i want 2 over here, i guess
</asp:GridView>
I want 3 in here..
<tr align ="center" style="position:fixed">
<asp:ImageButton ID="btnDisable" runat="server" ImageAlign="Middle" ImageUrl="~/images/green-deactivate.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" />
</tr>
</table>
</div>
Use padding-bottom in the header td style to get the proper spacing.
Use gridlines="None" on the GridView.
Put the Gridview and the buttons in td:s to place them properly.
This is rather basic HTML/CSS knowledge (nothing wrong with that), but investigating basic information sources may help you help yourself.
As to your specific items:
A 'break' can be as simple as a <br /> statement between the controls
if you don't want colors: #88b9c7 and similar-looking statements are colors.
As you're using a table, positioning the buttons below your grid can be done by placing them in the correct <tr> / <td>
For #1, try using margin or padding on the td, or wrap "Disable Location" in a span (or something) and style its margin/padding to give some space.
For #2, try setting Gridlines="None" on the GridView.
For #3, make sure you have a <td> inside the <tr>, and try using text-align:center on either the td or a div wrapping the buttons. Alternatively, don't put it in the table, just wrap them in a div with text-align:center, right under the table (do you need the table at all?)