I have a table like so. How would I add a thick vertical line between columns 2 and 3 so it splits it in half? I did some searching but everything I found was for a border around an entire column/cell. I just want a line going down.
You could use border: http://jsfiddle.net/kzp36owo/3/
table {
background: blue;
color: #ffffff;
}
table tr td:nth-child(2) {
border-right: 4px solid yellow;
}
In order to work properly it's important to reset cellspacing of table.
Related
Related Question
The above question is similar. But I wanted to know if the right borders can be made continuous?
How do I get the gaps between the vertical lines to disappear and make it look like a continuous line?
Also, I have to use inline CSS styling. Can't work with external CSS or style tags within head either.
You can achieve that by doing this
table {
border: none;
border-collapse: collapse;
}
td {
border: none;
border-right: solid 1px #333;
padding: 10px;
}
tr td:last-of-type {
border: none;
}
Click to see working example
I was trying to put some horizontal spacing between the table cells here:
http://jsfiddle.net/mVX93/43/
However the only thing I was able to do to get it to appear correctly was to put a thick border the same colour of the background a bit like this:
border: 10px solid gray;
Is there not a better way to put spacing between the cells?
Change your code to this:
#my-table td{
padding-left: 10px;
padding-right: 10px;
vertical-align: top;
background-color: white;
}
Remove this line
border-collapse: collapse;
to see your space between cells better
I am trying to achieve the following effect using CSS
I tried using a table and an empty column at second place to achive double-line effect and then I used left and right borders.But I am getting breaks shown below
I used border-collapse:collapse but it then removes that empty column making the trick fail.So what can I do or any other hack that you can suggest.
EDIT: Here is the code
<table>
<tr><td>Name</td><td class="target"></td><td class="target1">Age</td><td>School</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
</table>
The css
table td
{
padding: 14px;
padding-left: 3px;
font-size: 20px;
border-bottom: 1px solid #F4C8C8;
}
.target
{
border-right: 1px solid #F4C8C8;
}
.target1
{
border-left: 1px solid #F4C8C8;
}
table tr td
{
}
table
{
/*border-collapse: collapse;*/
}
Why not just use the border-style double?
just add a class "first" to your first column and add this style to it:
.first{
border-right-style:double;
}
http://jsfiddle.net/KEw9W/
EDIT: here's a fiddle with your code: http://jsfiddle.net/hC78S/3/
I've removed the empty cells and added this to your "target" code:
.target1
{
border-left: 4px double #F4C8C8;
}
As you can see, you need to enlarge the border in order to be able to see the double line. (because 1 pixel won't be able to show 2 lines obviously)
How can I achieve a similar effect as in http://jsfiddle.net/eLWe3/2/, but without the additional markup?
I tried with tr:before {}, but it messes with the table. Solution has to work with IE8 and up, fallback to a single border on IE7 is okay.
This fork of your original example is as close as I could get. The updated CSS is:
table { margin: 0 auto; border-collapse:separate; }
thead { background: #FDECEE; }
th { font-weight: bold; }
tbody tr:last-child td { border-bottom: 1px solid blue; }
tfoot td { border-top: 1px solid pink; }
But, as you can see, I've not been able to get the 2px gap you wanted between the two borders. As far as I know, this won't be possible without additional markup of some description: hopefully I'm wrong.
Edit - I've created a new example that uses generated content to get the gap you're after:
tbody tr:last-child td:after {
content:'';
display:block;
border-bottom: 1px solid blue;
margin-bottom:2px;
}
It works in Firefox, Chrome and IE9+, falling back to a single border for less capable browsers. The only reason IE8 fails is because it lacks support for last:child to target the final row in the tbody. You could add a class to the last row in the table (either directly or using JavaScript) to get it working in that browser.
not a great idea but use a background image on the relevant row/cell
Maybe this is an acceptable alternative:
tbody {
border-bottom: 2px outset pink;
}
Is there a possibility to have a visual separator between two lines (tr) in an HTML table.
I tried with a <br> but this is not valid code.
I tried do add a padding-top to the tr after the break but it does not work.
Currently I use an empty line:
<tr><td colspan=\"X\"> </td></tr>
but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.
Is there any way to solve this?
Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).
If you want a visual separator (rather than simply white-space) then simply use:
td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}
The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:
td {
padding: 0.5em 1em;
border: 1px solid #ccc;
}
JS Fiddle demo
Although there is the potential to use transparent (or background-color-ed borders):
table {
border-collapse: separate;
}
td {
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
td:hover {
border-color: #ccc;
}
JS Fiddle demo
The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.
Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.
About the colspan-problem see Colspan all columns.