HI take a look at this simple code:
http://jsfiddle.net/8GsZa/
What I want is something like this:
By adding the .tborder class to tr or td wont work.
Use css border-collapse property , that may fix your problem
.tborder
{
border-collapse:collapse;
}
.tborder,.tborder td,.tborder th
{
border:1px solid #427BD6;
}
FIDDLE DEMO
Demo Fiddle Here
mention .tborder tr td in your css
.tborder tr td
{
border:1px solid #427BD6;
}
<table border="0" class="tborder" cellspacing="0" cellpadding="0">
<tr>
<td align="center">Title1</td>
<td align="center">Title2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
.tborder tr td{
border:1px solid #427BD6;
}
Related
Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there.
The code I got so far:
.noborders th {
border-bottom: 0;
}
table {
border-collapse: collapse
}
#test {
border-collapse: collapse;
border: 0;
}
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
<tr>
<td id="test"></td>
<td></td>
</tr>
</body>
What I want it to look like
What it looks like
First, place your <th> inside <tr>...
Use class instead of id(id should be unique)
Just set border:0 to all td, th and apply border-right to .test
th,
td {
border: 0;
}
td {
padding: 20px;
}
table {
border-collapse: collapse
}
.test {
border-collapse: collapse;
border-right: 1px solid;
}
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th class="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td class="test"></td>
<td></td>
</tr>
</table>
You have a lot of terrible code here. For one, fix your formatting, for two, you're missing a lot of tags (closing </body>, and a <tr> wrapping your headers). Three, you don't even have the class you're referencing in your css on the table itself. Fourth, you can't have multiple ID's with the same name.
<style>
.noborders th {
border-bottom:0;
}
table {
border-collapse:collapse
}
#test {
border: 0;
}
</style>
HTML
<body>
<table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td id="test2"></td>
<td></td>
</tr>
</table>
</body>
there is th/td property called “rowspan” that will do what you want.
https://www.w3schools.com/tags/att_td_rowspan.asp
Here's the fiddle:
https://jsfiddle.net/80mek2sL/1/
I want to select all but the first tr and apply:
border-top: 1px grey solid;
Then I want to select all first td's but not the first td of the first tr (= ignore first tr) and apply
border-right: 1px grey dotted;
(I totally dont care about compatibility with prehistorical Web browsers, I just want it to work on nowadays Web browsers)
What I dont get (that's why I'm lost actually) is that immediate selector table > tr doesn't select tr (otherwise I would have solved my problem)
Your selector is working. The problem is that tr's don't have a border. You need to apply it the td within...
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
Updated Fiddle
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px; padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
<h1>Vim</h1>
<table id="cheatsheet">
<thead><tr>
<td colspan="2"><h3>aa</h3></td>
</tr></thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code></td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code></td>
<td style="width:auto">split vertical</td>
</tr>
</table>
On another note, the reason table > tr doesn't work is because tr's are not an immediate descendant of table in the rendered HTML. If you use your browsers element inspector you will see that thead and tbody elements are automatically inserted for you
EDIT
After the comment below all you need to do is this...
#cheatsheet tbody td {
border-top:1px grey solid;
background-color: #EF0;
}
ie. target the td within tbody only,
Updated Fiddle
check fiddle :https://jsfiddle.net/80mek2sL/6/
nth-child(n+2) selector helps to select any number of child. in following example I am selecting row from ahead of second child.
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
You can also play aorund (n + *) and check the result to better understand the nth-child selector
note: you can not put border property to <tr> so you will need to
assign it to <td>
HTML
<table id="cheatsheet">
<thead>
<tr>
<td colspan="2">
<h3>aa</h3>
</td>
</tr>
</thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code>
</td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
</table>
CSS
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px;
padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
I have following HTML code with style...
Below is the table with 5 rows... only table corner is getting bordered not the rows.
I want the rows as well outlined with same style.
<table width="330" cellspacing="0" cellpadding="0" style="border-width:1px;border-color:black;border-style:solid;border-collapse: collapse;" >
Out put is coming as
You need to set the style on the <tr> tag.
<tr style="border:1px solid #000"></tr>
Since people seem to be a bit lazy one this one I have created a demo to better explain this.
HTML:
<table width="330" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
CSS:
table {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
tr {
border: 1px solid;
}
td {
width: 100px;
height: 40px;
}
DEMO HERE
You put the border on tr for the rows. If you want the cells you put it on td. You should also use border-collapse:collapse; on the table. Have a play with it to see what how it works. In short it will collapse the borders into single border (so they don't sit next to each other causing a larger border)
CSS:
td {
width: 100px;
height: 40px;
border: 1px solid;
}
DEMO HERE
Update:
Table with a class:
CSS:
.ruddy {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
HTML:
<table class="ruddy" width="330" cellspacing="0" cellpadding="0">
</table>
DEMO HERE
Read on border-collapse.
Specifically, you need border-collapse: collapse;
actually border in css for the table will be applicable only on the table not on TR..
because CSS define for the table can not be inherit on TR or TD
if you want to have border on TR then u must define the border property in CSS for the TR element
tr
{
border:1px solid black;
}
or for column use the TD instead for TR.
To give borders to ROWS you need is another rule:
table tr{
border:1px #000;
}
in html
<table width="330" cellspacing="0" cellpadding="0" class='table' >
in css
.table
{
border:1px solid #000;
}
.table td,.table tr
{
border-collapse: collapse;
}
You should apply the style at tr not the table, so it goes like the following:
<tr style="border-width:1px;border-color:black;border-style:solid;">
But I think it's easier if you use the border attribute. The output is almost similar:
<table border="1" width="330" cellspacing="0" cellpadding="0" >
In a single page am having multiple tables but only for a set of tables want to apply css not for all. which for table bgcolor, th color, border color and text color.So I tried to create a separate class .mytable and applied which is not working but if I make that .mytable to table it comes for all the tables.Please help me to solve this.Thanks in Advance.
jsFiddle Link is Here
<style>
.mytable td th //instead of .mytable table it works
{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table> /// no need of this css
</table>
Rewrite this .mytable td th as .mytable td, .mytable th
Here: http://jsfiddle.net/y8B2j/1/
Try this
.mytable td, .mytable th
{
border:1px solid green;
}
DEMO
I cant see any problem in above code, but you can try identifier instead of class by denoting it as '#mytable'.
Just give it a try.
th selects every <th>-element.
.mytable td th selects all <th>-elements inside <td>-elements inside an element, that has class mytable.
I think what you need is this:
/* td & th elements inside 'mytable' */
.mytable td, .mytable th
{
border:1px solid green;
}
/* th elements inside 'mytable' */
.mytable th
{
background-color:green;
color:white;
}
<style>
.mytable td th
{
border:1px solid green;
}
.mytable th
{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
It's because, you write wrong CSS Rule :
Your css rule : .mytable td th refers to inner th tag into table columns .mytable td.
So, If you want apply your css style for both th and td. You need to write this one:
.mytable td, .mytable th
{
border:1px solid green;
}
Try in fiddle
As i seen your code you using th as a child tag of td but th not child tag of td so use below code
Click here for fiddle
.mytable th
{
border:1px solid green;
}
Please add these lines on top of your Css file
tr{ background:#00CC66;}
th{ background:#ccCC66; border:1px dashed #0066FF;}
td{ background:#ffCC66;}
color:#fff;
Access like this:
.mytable td, .mytable th (It changes the property for all td and th nested inside the .mytable)
OR
If you have seperate class inside the mytable means
HTML
<div class="mytable">
<div class="data">
<ol>
...
</ol>
</div>
</div>
CSS
.mytable.data ol //Accessing the child ol
I am targeting Chrome and other CSS3 compliant browsers and would like to have border separation for every other row.
The CSS I currently have working for every row looks like this-
table{
border-collapse:separate;
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
What I would like to achieve is this:
CSS
table{
border-collapse:separate;
}
table tr:nth-of-type(odd){
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
HTML
<table>
<tr>
<td>a-one</td><td>a-two</td><td>a-three</td>
</tr>
<tr>
<td>a-four</td><td>a-five</td><td>a-six</td>
</tr>
<tr>
<td>b-one</td><td>b-two</td><td>b-three</td>
</tr>
<tr>
<td>b-four</td><td>b-five</td><td>b-six</td>
</tr>
<tr>
<td>c-one</td><td>c-two</td><td>c-three</td>
</tr>
<tr>
<td>c-four</td><td>c-five</td><td>c-six</td>
</tr>
</table>
The data is in two row sets and needs to be connected, whereas different sets need to be separated. I would like to keep it in table form to take advantage of the browsers auto-column widths. It seems like border-spacing can only be achieved on the table level. I am already using borders for styling so transparent borders is not a viable option.
Any chance for me- or I am I stuck?
JS-fiddle here identical to above here: http://jsfiddle.net/sSba4/
I'd argue that if the data needs to be visually chunked in separate containers, perhaps the most semantic solution would involve using multiple tables.
However, if you want to keep everything in a single table for whatever reason, then you would need to introduce non-semantic markup to create those visual separations, as border-spacing is a property of the table, not of the row or cell.
<table>
<tr><th></th></tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
</tr>
<tr><th></th></tr>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
<tr><th></th></tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
</table>
CSS
table {
border-collapse:collapse;
}
table tr td {
border: solid #ccc 1px;
padding: 5px 7px;
}
table tr th {
border: none;
padding-top: 5px;
}
See it in action here http://jsfiddle.net/wYCNg/
How about adding an additional row with transparent borders?
html:
<table>
<tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
<tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
<tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
<tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>
</table>
css:
table{
border-collapse:collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
tr.break, tr.break td{
border:none;
height:5px;
padding:0;
}
I've just been considering the same matter. If you put div element inside td, you can use plenty of box-model properties, eg. margin. If you additionally hide td borders you can use margin to set space between cells, rows, cols.
#tab {
border-collapse:collapse;
}
#tab td{
padding:0px;
}
#tab td>div {
width:50px;
height:50px;
background-color:#97FFF8;
margin:1px;
}
#tab td:nth-child(1)>div {
margin-right:10px;
}
#tab tr:nth-child(1) div {
margin-bottom:10px;
}
<table id="tab">
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>