I have a set of tables across pages that are always called tblData. I would like to be able to set the CSS properties for the elemenets inside the table e.g. the labels, the column styles, the text etc.
At the moment I am doing it like this
#tblData{
style...}
.dataColumn{
style...}
But I would like to consolidate them somehow into the tblData class so I only need to add this one class to complete the layout.
This is what I already have to try and set the styles of the textboxes and labels but the label and textbox elements don't work:
.tblData {
border: solid;
border-width: 1px;
height: 200px;
color: rgb(45,40,128);
background-color: white;
width: 100%;
border-radius:3px;
margin-top:3px;
}
/*Class for the labels*/
.tblData label {
width: 13%;
color:black;
border-radius:3px;
font-family:verdana;
border-radius:3px;
border-color:rgba(45,40,128,0.75);
border-width:1px;
}
/*Class for the data textboxes*/
.tblData textbox {
border-color: rgba(45,40,128,0.75);
border-width: 1px;
background-color:rgba(45,40,128,0.10);
font-family:Verdana;
border-radius:3px;
}
This is a table example (note not complete because it's too large)
<table id="ContactsTable" class="tblData">
<tr>
<td class="auto-style1">
<asp:Label ID="lblContact" runat="server" Text="Contact" CssClass="Datalabelcolumn"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox1" runat="server" CssClass="Datatextbox" Width="200px"></asp:TextBox>
</td>
<td></td>
<td></td>
<td></td>
If you only wish to have a class applied to the table itself, you can add specific CSS selectors to isolate certain elements of the table itself, such as its rows or columns e.g.:
#tblData td{
/* sets cell styling */
}
#tblData tr{
/* sets row styling */
}
#tblData th{
/* sets head styling */
}
#tblData tr td:first-child{
/* sets styling of first column */
}
#tblData tr td:last-child{
/* sets styling of last column */
}
#tblData tr td:nth-child(n){
/* sets styling of specific column (change n to number) */
}
The above basically says take the element with the id tblData then select the child elements which fit the following selectors. It may also be worth having a look at the W3 selector documentation for further info.
Here's a FIDDLE with some example selectors.
Related
I am dynamically generating pdf from HTML which has content that might run across pages.I am using IE11.
When there is a table that runs to multiple pages, the bottom border of the last row is not shown in each broken page. The bottom border appears only in the last page or where the table is closing.
Is there any way to apply bottom border in this case.
You just need to put javascript part and (border-collapse) in css. I have written other css just for styling.
var $foo = $('#foo');
var bodyLastRow = $foo.children('tbody').children('tr:last-child');
bodyLastRow.css({
'border-bottom': '1px solid #555'
});
#foo {
border-collapse: collapse;
}
#foo thead tr {
background: rgba(0,255,0,0.6);
}
#foo tbody tr {
background: rgba(0,255,0,0.3);
}
#foo tbody tr td, #foo thead tr td {
padding: 5px;
}
<table id="foo">
<thead>
<tr>
<td>Name</td>
<td>Email</td>
</tr>
</thead>
<tbody>
<tr>
<td>Ashish</td>
<td>ashish#gmail.com</td>
</tr>
<tr>
<td>Asdh</td>
<td>asdh#outlook.com</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$('table#foo tbody tr:last-child').css({
border-bottom: #555
});
I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as
seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.
Is there a way to achieve it.
I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from
code behind. But I don't want to do this as I want to all the features offered by the asp:GridView.
I have written custom css to achieve this feature. To use my code follow the below steps,
Step1: Enclose your GridView inside a section with Id as no-more-gridView
as below
<section id="no-more-gridView">
<asp:GridView..>
.
</asp:GridView>
</section>
Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,
e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.
Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.
/* Author : Vinay
Description: Responsive GridView
*/
/* Force gridview to not be like gridview anymore */
#no-more-gridView table,
#no-more-gridView thead,
#no-more-gridView tbody,
#no-more-gridView th,
#no-more-gridView td,
#no-more-gridView tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-gridView .table_column_head > * {
display:none;
}
#no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
#no-more-gridView td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
padding-bottom: 1em;
}
#no-more-gridView td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-gridView td:before { content: attr(data-title); }
I need to get rid of the borders around the individual checkboxes that are rendered by a CheckBox control. Here's what it looks like now:
The ASP.Net markup is straightforward:
<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>
which is in a cell in a table with the class formTable applied (see below).
As you can see, I've tried setting the attributes BorderStyle="None" and BorderWidth="0" to no effect.
I'm pretty sure that what's behind this is the following CSS, which puts rounded corner borders around the enclosing table cells, which I want to keep:
.formTable
{
background-color: #eeeeee;
border: solid 1px #bbbbbb;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
I added the following CSS, which also did nothing:
.formTable tr td input[type="checkbox"]
{
border: none;
}
Finally, the HTML rendered from the .aspx for the CheckBoxList, as seen in Chrome DevTools, looks like this (edited a little for brevity):
<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<tbody>
<tr>
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
checked="checked" value="Native American" />
<label for="main_cblEthnicity_0">Native American</label>
</td>
...
</tr>
</tbody>
</table>
Any suggestions on how I can get rid of the unwanted borders?
UPDATE: Here are some images to make it more clear what's going on and what I'm trying to accomplish:
This is what I'm getting now:
This is what I get if I use either suggestion that has been presented so far:
This is what I'm trying to achieve:
In addition to the suggestions made here, I tried adding this to the CSS, but it made no difference:
.formTable tr td > input[type="checkbox"] {
border: none;
}
I also tried this in Javascript/jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('.formTable tr td > input[type="checkbox"]').removeAttr("border");
});
</script>
The problem isn't the input but in it's td.
Look:
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
Here (above) is defined the border radius. And here (below) the border color:
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
So, to change this, you may want to add just after the above CSS code, this:
.formTable tr td
{
border:0;
}
Doing this, you'll just make the td borders to disappear and not the borders of tr or th
UPDATE AFTER OP's CLARIFICATIONS
Oh, all right. Now with those new screenshots we can see well what you're tryning to do achieve.
Anyway, you're still trying to remove a border from the input, but I repeat, the problem isn't the input but it's td.
I'll explain you with the code you gave us ok? So:
<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<tbody>
<tr>
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
checked="checked" value="Native American" />
<label for="main_cblEthnicity_0">Native American</label>
</td>
...
</tr>
</tbody>
</table>
This is the HTML code of the table that has inside all those checkboxes. All it's TDs have rounded borders and stuff we already know. This table that has inside all those checkboxes is inside a bigger TD (which borders you want to keep) W're in the following situation:
So now you got 2 ways to act without changing all your HTML: CSS or jQuery.
The CSS way
Pretty simple, you may want to put inline style at those table cells (which have checkboxes inside) like this: style="border:0" instead of style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;". Or Just create a new CSS class like this
.no-borders {
border:0;
}
and apply it on every td you don't want to see.
The jQuery way
<script type="text/javascript">
$(document).ready(function() {
$('.formTable input[type="checkbox"]').parent().css('border','none');
});
</script>
Your code isn't showing it, but apparently at some point class .formTable is being assigned to the CheckBoxList. Just remove border: solid 1px #bbbbbb; from the second class declaration:
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
vertical-align: top;
}
Demo: http://jsfiddle.net/pgpR3/1/
I am trying to set some styles for objects that are within a table but the problem is that the properties are not being applied to the actual objects.
the .tblData works fine but the label and textbox properties are supposed to be or any ASP.net label or textbox that appears within the table but the CSS doesnt get applied to them.
.tblData {
border: solid;
border-width: 1px;
height: 200px;
color: rgb(45,40,128);
background-color: white;
width: 100%;
border-radius:3px;
margin-top:3px;
}
/*Class for the labels*/
.tblData label {
width: 13%;
color:black;
border-radius:3px;
font-family:verdana;
border-radius:3px;
border-color:rgba(45,40,128,0.75);
border-width:1px;
}
/*Class for the data textboxes*/
.tblData textbox {
border-color: rgba(45,40,128,0.75);
border-width: 1px;
background-color:rgba(45,40,128,0.10);
font-family:Verdana;
border-radius:3px;
}
This is the HTML (can't show all of it because the table is massive):
<table id="tblAddress" class="tblData">
<tr>
<td class="auto-style3">
<asp:Label ID="lblACNO" runat="server" Text="ACNO" CssClass="Datalabelcolumn"></asp:Label></td>
<td class="auto-style2">
<asp:TextBox ID="txtACNO" runat="server" CssClass="autosuggest" Width="20%" ToolTip="This is a test tooltip"></asp:TextBox>
</td>
In ASP.Net, server tag<asp:Label> will be rendered as html <span>.
for <asp:TextBox> it is <input type='text'>
So please change your css selector
from
.tblData label {}
.tblData textbox{}
to
.tblData span{} or .tblData .Datalabelcolumn{}
.tblData input[type="text"]{} or .tblData .autosuggest {}
You are applying different css class to your Lable and TextBox inside your table (i.e Datalabelcolumn and autosuggest). So it will only apply those properties. Remove them and it will work. Or mention whatever style you need in your "Datalabelcolumn" and "autosuggest" css class for those controls.
add class="tblData" to td instead of table
basic demo
<td class="tblData">
<label>this is a label</label>
<textbox>this is textbox</textbox>
</td>
I need to apply background color to the alternating rows of my html table.
My current code:
.licList
{
width: 100%;
border: 1px solid #f7f7f7;
text-align: center;
border-collapse: collapse;
}
.licList th
{
font-weight: bold;
background-color: #dbdbdb;
border-bottom: 1px solid #f1f1f1;
padding: 4px 5px;
}
.licList td
{
padding: 4px 5px;
}
.odd
{
background-color: #ffffff;
}
.odd td
{
border-bottom: 1px solid #cef;
}
and jquery is
$(document).ready(function () {
$("licList:tr:odd").addClass("odd");
});
I'm sure that the above jquery is not correct I've multiple tables in single page so I can't apply
$(document).ready(function(){
$("tr:odd").addClass("odd");
});
so my question is how to solve this problem????
jquery is not correct I've multiple tables in single page so I can't
apply
Assign a id/class to your table and access rows under that table. Suppose your table has id tbl
Live Demo
<table id="tbl">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
$(document).ready(function(){
$("#tbl tr:odd").addClass("odd");
});
Remeber that jQuery selectors are just like CSS selectors so licList:tr:odd isn't a valid selector. You can do this with just CSS though:
.licList:nth-child(odd) { ... }
There is a Jquery selectors for both even rows and odd rows. You can use that with table id,
$(document).ready(function(){
$("#table1 tr:odd").addClass("odd");
$("#table1 tr:even").addClass("even");
});
CSS3 allow this , Dont go for javascript as you can easily do it
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
DEMO
If you use jQuery.each() then it will be two collections of table and you can filter from there instead of a huge collection of tr
$('table').each(function(){
$(this).find('tr').filter(':odd').addClass("odd"); //first rows always the same
});
fiddle