I am trying to get a very thin border for my table (table rendered from a GridView). I have set the BorderWidth="0" for the GridView and then through CSS I am creating the border for the rows that I need. Here I don't want any border around the grid header. HTML code for grid renders to table and TRs. So I ahave the following css:
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
This makes the grid look like what I need witn no border in the header. But, the width of the border on other rows is too thick in IE6 but in FF it looks great. Is there a way to make the border extra thin in IE?
Here is the working HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
</style
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<div>
<br />
<div>
<table cellspacing="0" rules="all" border="0" id="GridView1" style="border-width:0px;border-collapse:collapse;">
<tr>
<th align="left" colspan="5" style="font-weight:normal;"><a id="GridView1_ctl08_{0}_HeaderLink1" href="javascript: SelectAll(true)">Select All</a><span> | </span><a id="GridView1_ctl08_{0}_HeaderLink2" href="javascript: SelectAll(false)">Clear All</a></th>
</tr><tr class="top row">
<td><input id="GridView1_ctl02_CheckBoxButton" type="checkbox" name="GridView1$ctl02$CheckBoxButton" /></td><td>10-000000-001</td><td>The Iliad and The Odyssey</td><td>12.95</td><td>Mike Loyid</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl03_CheckBoxButton" type="checkbox" name="GridView1$ctl03$CheckBoxButton" /></td><td>10-000000-999</td><td>Anthology of World Literature</td><td>24.95</td><td>Jessica Freclih</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl04_CheckBoxButton" type="checkbox" name="GridView1$ctl04$CheckBoxButton" /></td><td>11-000000-002</td><td>Computer Dictionary</td><td>24.95</td><td>Roger Butt</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl05_CheckBoxButton" type="checkbox" name="GridView1$ctl05$CheckBoxButton" /></td><td>11-000000-003</td><td>Cooking on a Budget</td><td>23.95</td><td>Leena Reebeca</td>
</tr><tr class="top bottom row">
<td><input id="GridView1_ctl06_CheckBoxButton" type="checkbox" name="GridView1$ctl06$CheckBoxButton" /></td><td>11-000000-004</td><td>Great Works of Art</td><td>29.95</td><td>Luke Killey</td>
</tr>
</table>
</div>
<input type="submit" name="Button1" value="Button" id="Button1" /></div>
<span id="Results"></span>
</form>
</body>
</html>
Use "1px" instead of "thin".
Related
I m using a table in angularJS with ng-class for borders (Few borders appear, based on div). Code for template is below:
<table style="border: 1px solid #ddd;" class="table container-margin table-fixed">
<tr>
<th style="border: 1px solid #ddd;">heading1</th>
<th style="border: 1px solid #ddd;" ng-repeat="option in options" class="hand-cursor">{{option.text}}</th>
</tr>
<tr ng-repeat="row in array">
<td ng-repeat="col in row track by $index" ng-click="(col.clickable === false) ? null : edit(col.impact, col.option, col.pers)"
ng-class="{'forTableHeading': (col.type==='tableHeading'), 'perspectiveTitle': (col.type==='perspectiveTitle'), 'shortOrLongTermValue': (col.type==='shortTermValue' || (col.type==='longTermValue')),
'fieldImpact': (!col.type&& col.field==='impact'), 'fieldDop':(!col.type && col.field==='dop'), 'fieldBlank':(!col.type && col.field==='blank')}">
<div style="white-space: pre;" ng-if="col.type==='shortTermValue'" ng-style="getBorderStyle(col.shortTermEffect)">{{col.shortTermEffect}}</div>
<div style="white-space: pre;" ng-if="col.type==='longTermValue' ng-style="getBorderStyle(col.shortTermEffect)">{{col.longTermEffect}}</div>
<div style="display:inline-block;font-style:italic;text-align:center;color:red;" ng-if="col.type==='tableHeading' " class="small">{{col.text}}</div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="col.type==='perspectiveTitle'"><b>{{col.title}}***{{description}}***</b></div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="!col.type&& col.field==='impact'">{{col.text}}</div>
<div style="word-wrap: break-word;white-space: pre-wrap !important;" ng-if="!col.type && col.field==='dop'">{{col.text}}</div>
<div style="white-space: pre !important;" ng-if="!col.type && col.field==='blank'"></div>
</td>
</tr>
</table>
I have my CSS classes in own file. When I use the same table using,
<div ng-include="'aaa.tpl.html'"></div>
However, when I use this table along with ng-include, all table borders are seen and ng-class is not working. Can someone say what am I doing wrong here?
I've created JSFiddle here: https://jsfiddle.net/fpqwruyd/
html:
<body>
<table style="width:100%">
<tr>
<td colspan=1>Jill</td>
<td colspan=2>Smith</td>
</tr>
<tr>
<td colspan=1>Eve</td>
<td colspan=2>Jackson</td>
</tr>
<tr>
<td colspan=1>John</td>
<td colspan=1>Doe</td>
<td colspan=1>
<input type="text"></input>
</td>
</tr>
</table>
</body>
css:
input[type=text] {
width: 100% ;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
min-height:35px;
padding: 0px !important;
margin: 0px !important;
border-color: white !important;
border: 0px !important;
}
I want to apply different CSS to the input text in my html. The existing input[type=text] should apply to other input texts in my html (not shown). How can I do that? I defined a new class but it's not being applied. Thanks in advance.
try this input[type="text"]{} or if it fails use !important in your styles to try.
You might look at http://www.w3schools.com/css/css_attribute_selectors.asp
Check out this JSFiddle I created: https://jsfiddle.net/sks9bo5u/1/
It demonstrates a few scenarios of combining classes with TYPE attributes to select different elements.
<body>
<input type="text" class="red" value="This is RED"></input><p>
<input type="text" class="blue" value="This is NOT Blue"></input><p>
<input type="text" class="green" value="This is GREEN"</input><p>
<br>
<input type="button" class="red" value="This is NOT RED" /><p>
<input type="button" class="blue" value="This is BLUE" /><p>
<input type="button" class="green" value="This is ALSO GREEN" /><p>
</body>
.red[type=text]
{
/* This class turns input tags of ONLY type "text" RED */
border:1px red solid;
color:red;
}
.blue[type=button]
{
/* This class turns input tags of ONLY type "button" BLUE */
border:1px blue solid;
color:blue;
}
.green
{
/* This class turns any input type GREEN */
border:1px green solid;
color:green;
}
body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}
/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}
h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6">Home</b></td></tr>
<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
Menu<br>
<br></br>
Delivery<br>
<br></br>
Testimonials<br>
<br></br>
Contact information<br>
</td>
<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>
<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>
<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>
<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>
Hey, so after I've finally got something going I've gone to place a google map (not fully implemented yet), just trying to get the right placement for it. It seems tho I can't get the google map to move to the bottom of the page where I'd like it? Or even how do I get the image to move? It seems to have gone above the border at the top, this is really poor positioning and I have to move it to the bottom. Any help to whats going wrong here would be greatly appreciated!
use the following:
<tr><td><div id="map-canvas"></div></td></tr>
at the end of your page, instead of:
<div id="map-canvas"></div>
it will place your map at the bottom of the page, it was at the top because you didn't assign a <tr> and <td> to it
good luck coding! ^^
edit: http://jsfiddle.net/h261cgc9/ Here's a fiddle to see the change i've made in action
But as I've mentioned in my comment, it's much better to create a website without the use of tables, only use tables when you actually want to put something in one, putting a whole body in the table is a bad idea, see: http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/
In the fiddle I removed the which contained the styles, as there is no need for it, you could just put the styles at the top of the page in between the <head> and <body>
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.
I have a table, one column of which contains only a checkbox and I am currently centering these with
<td style="text-align:center; vertical-align:middle;">
<input type="checkbox" name="xyz">
</td>
Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text
TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.
----------------
| Search ? | Next column
| (all/none) |
| [x] |
here's my code - how do I get that checkbox to center?
<th>Search?<br>
<span class="th_not_bold">(all/none)</span><br>
<input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">
</th>
try using
<th>
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
<div class="th_not_bold">(all/none)</div>
<div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>
You would do exactly the same thing you did for your other <td> - you would set text-align center; vertical-align: middle; on the <th>, and you wouldn't need to apply any properties to the checkbox:
Here's an example of the code you'd use:
th{
text-align: center;
vertical-align: middle;
}
You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/
<html>
<head></head>
<style type="text/css">
.center{
text-align:center;
}
</style>
<body>
<table border="1">
<tr>
<th valign="top" class="center">
Search?<br />
<span class="th_not_bold">(all/none)</span><br />
<input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />
</th>
</tr>
</table>
</body>
</html>