I need a way to show only the vertical lines in a table.
I've tried to add border-left and border-right, both with :1px solid #red;, to both the table and the separate td's. but it won't add the border color.
So what I'm looking for is an easy way to create these vertical lines.
Use border-collapse on your <table> than border-left and border-right on your <td>.
table { border-collapse: collapse; }
tr { border: none; }
td {
border-right: solid 1px #f00;
border-left: solid 1px #f00;
}
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
Expounding upon Simon's answer for those who want vertical lines within a table but not different columns. Note: you have to do it exactly as specified in his answer. The table itself needs border-collapse:collapse or multiple lines will show, the tr needs border:none or an outline will show, and the td border-left/right/top/bottom part is obvious.
<html>
<head><style>
table {
border-collapse:collapse;
}
tr {
border:none;
}
th, td {
border-collapse:collapse;
border: 1px solid black;
padding-top:0;
padding-bottom:0;
}
.verticalSplit {
border-top:none;
border-bottom:none;
}
.verticalSplit:first-of-type {
border-left:none;
}
.verticalSplit:last-of-type {
border-right:none;
}
</style></head>
<body><table>
<tr><td>
<table><tr>
<td class="verticalSplit">A</td>
<td class="verticalSplit">B</td>
</tr></table></td>
<td>C</td></tr>
<tr><td>D</td><td>E</td></tr>
</table></body>
</html>
Related
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
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;
}
please see this example:
http://jsfiddle.net/qTjdX/
I want the red border-bottom to show as 1 solid line, but right now the yellow border is splitting it up in 3. Is there any way to have the border-bottom take precedence? Like a z-index of sorts?
I have tried both border-collapse:collapse and border-collapse:separate.
The only thing that is working is if I make the red line thicker, but I want it to have the same width.
table {
width:100%;
border:1px solid blue;
border-collapse:separate;
}
th, td {
border:1px solid yellow;
padding:5px;
}
th {
background:black;
color:white;
}
th {
border-bottom:1px solid red !important;
}
td {
background:#efefef;
}
The problem you're having is because the border is composed of four separate sides, which meet at 45 degree angles at the corners, which is rounded in various ways. So having a bottom-border a different color to that of the sides will always cause the borders to break.
If you look at this demo:
div {
float: left;
border-width: 25px;
border-style: solid;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
JS Fiddle demo.
You can see how the various borders meet, because a pixel can't be subdivided this leads to the corner-pixels being the same solid colour as one of the sides and therefore a different colour, if the colours are different, to the other side with which it connects.
To compensate the only option you really have is to use a nested element within the th:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
<th><div>col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
With the following CSS:
table {
width:100%;
border:1px solid blue;
border-collapse:collapse;
}
th {
border-bottom: 2px solid yellow;
}
th div, td {
border: 1px solid red;
}
th div {
border-bottom-width: 0;
}
JS Fiddle demo.
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }
I set the border for the table event_calendar tr to be red, it works in everything except IE 6 & 7. What is wrong with my CSS?
table#event_calendar tr {
border:1px solid red;
}
<div class="content-body">
<table id="event_calendar">
<tr class="calendarHeader">
<th><div class="calendarMonthLinks"><<</div></th>
<th colspan="5"><h1>April 2009</h1></th>
<th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">>></a></div></th>
</tr>
<tr>
<td class="calendarDayHeading">Sunday</td>
<td class="calendarDayHeading">Monday</td>
<td class="calendarDayHeading">Tuesday</td>
<td class="calendarDayHeading">Wednesday</td>
<td class="calendarDayHeading">Thursday</td>
<td class="calendarDayHeading">Friday</td>
<td class="calendarDayHeading">Saturday</td>
</tr>
</table>
</div>
IE does not honor the border property for <tr> tags. However, there are workarounds by putting a top and bottom border around each cell, and using "border-collapse: collapse;" so there's no space between cells. I will refer to this resource here on the exact method, but it will essentially look like this for you (I haven't tested it myself, so I'm not sure if this is exactly right, but I think you can riff on it.)
table#event_calendar {
border-collapse: collapse;
border-right: 1px solid red;
border-left: 1px solid red;
}
table#event_calendar td, table#event_calendar th {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
Your CSS is sensible enough, but IE just doesn't do borders on tr elements. If you use this style you should get the intended result though:
table#event_calendar {
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-collapse:collapse;
}
table#event_calendar td, table#event_calendar th {
border-bottom:1px solid red;
}
Setting the border on the td is the easiest solution. But if you really really want to make the borders on <tr>, you can always set:
tr { display:block; border-bottom:1px dotted #F00; }
By doing this, you loose the common width between the <td>. If you want to make all of them equal on width, set the display for <td> to inline-block and set some width:
td { display:inline-block; width:20%; }
It helps when you want to draw some border on the <td> and on <tr>.
CSS generated content like tr:before{} or tr:after{} can always help as well.
Change your CSS selector to "table#event_calendar tr td" and it should work.