Table with only one border line, in this case i have two borders...
<table width="100%" border="1">
<tr>
<td width="12%"> </td>
<td width="88%"> </td>
</tr>
</table>
Thanks
Add the border-collapse CSS rule:
table {
border-collapse:collapse;
}
jsFiddle example
CSS:
table {border-collapse:collapse;}
You should really use css for styling where possible. A great article about it is here http://www.w3schools.com/css/css_table.asp
Try adding this to you css
table
{
border-collapse:collapse;
}
An example is here http://jsfiddle.net/cxmBW/1
Related
i want to decrease the width of columns in below table.
<table cellspacing="0"cellpadding="0">
<tr><td><h3>Allow Points+Cash </h3></td></tr>
<tr><td><br>MIN CASH REQUIRED</td></tr>
<tr>
<td><br><input type="number" style="width:150px" > Or</td>
<td><br><input type="number" style="width:150px" > % Of Award Value</td>
</tr>
<tr><td><h3>Point to Cash Conversion </h3></td></tr>
<tr><td><br>CURRENCY</td>
<td><br>CONVERSION</td>
</tr>
</table>
try this:
<table cellspacing="0" cellpadding="0">
</table>
<style>
*{ margin:0; padding:0;}
</style>
You can remove all the margin and padding using the mentioned code in stylesheet.
Perhaps you're wanting to collapse the borders? http://www.w3schools.com/cssref/pr_border-collapse.asp
table {
border-collapse: collapse;
}
This question already has answers here:
How to apply CSS to td of particular table?
(4 answers)
Closed 7 years ago.
How to apply CSS to td of particular table using Classname? (Not ID or Name)
Following is HTML
<table class="pure-table ToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
<table class="pure-table NotToBeApplied>
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
I want to apply CSS say
td {padding-top:0; padding-bottom:0;}
i want to apply it on td's of table having Classname''ToBeApplied''.
I do not want to write a class and write same on each td of table
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
How to modify HTML and CSS to achieve above?
Try this
table.ToBeApplied tbody tr td{
padding-top:0; padding-bottom:0;
}
Use:
.ToBeApplied td {padding-top:0; padding-bottom:0;}
try this
table.pure-table.ToBeApplied td{
padding-top:0px;
padding-bottom:0px;
}
i want to apply it on td's of table having Classname''ToBeApplied''.
Use:
.ToBeApplied td { ... }
I do not want to write a class and write same on each td of table
You don't need to, the code above will apply to all cells in table.ToBeApplied
I do not want it to apply on td's of second table have Classname''NotToBeApplied''
It won't.
I have table with some rows.
I would like to create a CSS that allow me to change the color for the first TD element in a TR row recursively only for a table which has the class mytable.
Could you give me a sample of CSS?
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
For this you can use :first-child property. Write like this:
.mytable td:first-child{
color:red;
}
Use the CSS "first-child" element: http://www.w3schools.com/cssref/sel_firstchild.asp
So can do something like:
.mytable td:first-child {
something here
}
as #sandeep has written you can use first-child to achieve the goal. Better approach, if possible, is to add a class name to your first td. If this is supposed to be the header, you might also want to use th instead of td
Sandeep has the right idea, but you seem to be asking for a style rule that's slightly more specific. Try this:
table.mytable td:first-child {}
:first-child does not work in IE, a practical approach would be to change these td which you are gonna apply a background to th and then style them
You can try this:
HTML
<table class="mytable">
<tr>
<td>Event Title:</td><!--Change color here-->
<td>{EventTitle}</td>
</tr>
<tr>
<td>Start date:</td><!--Change color here-->
<td>{DateTimeStart}</td>
</tr>
<tr>
<td>End date:</td><!--Change color here-->
<td>{DateTimeEnd}</td>
</tr>
</table>
CSS
.mytable tr td:first-child{
color:red;
}
http://jsfiddle.net/hrBAn/1/
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.
I have normal table, nothing special about it, here it is:
live example : http://jsfiddle.net/fFENK/1/
<table width="100%" border="1">
<tr>
<td rowspan="2">January</td>
<td colspan="2">$10s0</td>
</tr>
<tr>
<td>$100 <br/>$100 <br/>$100 <br/> </td>
<td>$540</td>
</tr>
</table>
The problem here is the text that got automatically centered along, as you can see in the live example I gave before, the text "January" is in the middle of the cell and not at the top of the cell like it suppose to be. How do i fix it?
Set the vertical-align property of the cell.
Add some css to your code:
td {
vertical-align:top;
}
Add valign attribute to <td> node:
<td rowspan="2" valign="top">January</td>
You should apply this css to make it get to the top
td { vertical-align: top }