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)
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 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.
I need to get rid outer border, just cells border and there should be space between cells . I can't get why it builds this outer border around the table, I just tried this code in separate file
table {
border-collapse: separate;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
}
and it display correctly. But on website content it make this outer border. Can somebody help me?
Just do in your css:
.tribe-events-calendar
{
border: 0px!important;
}
OR
#big
{
border: 0px!important;
}
Or, if it's already there the class or id, modify these values to set them as said. Beware the class, because supposedly it should affect other elements.
Reading again your question, if you set it in a different stylesheet it could happen that it overwrites the values of the 0px with the values of the Npx from the other sheet. Merge them into one, or, if you cannot, put the !important; mark after the css that says 0px.
If nothing works, embed (not include) it at the beginning of your file. Last and least (read: NOT ADVISABLE), use inline css.
I tried to add this: "border: none;" to the table element itself inside the HTML and it worked.
I think your problem is this:
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBB;
}
It overrides your css.
Use chrome's "inspect element" or firebug for Firefox to see the problem.
You Just need to change only one place that is,
Original Code
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBBBBB;
After Modification
table.tribe-events-calendar td {
border: 1px solid #BBBBBB;
You can use Firefox FireBug for inspect and do Live edits for CSS and Jquery.
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.
I just need to show my plain html table in which it shows only lines of rows and hide columns in it, so that the another person seeing it, thinks it as a table with one column, but actually it has multiple columns...I cant use colspan, as I need columns as itself...
Please help
thanks..
Turn the border off on your: <table border="0" class="thisTable">, and give it a class like the example. Then add the following lines to your CSS:
table.thisTable {
border-bottom:1px #000 solid;
// edit:
border-spacing:none; // you need this to take away spacing you still see
border-collapse:collapse; // you need this to take away spacing you still see
}
table.thisTable td {
border-top:1px #000 solid;
}
This will add a border at the top for each td and end the table off with a bottom border.
Hope this helps.
//edit:
Add a class to the first and last <td> of each <tr> and define the following in your CSS as well:
table.thisTable td.first {
border-left:1px #000 solid;
}
table.thisTable td.last {
border-right:1px #000 solid;
}
This will round the borders off nicely along the edges of the table.
Use CSS to style your table:
td {
border-bottom: 1px;
border-top: 1px; /* optional, you will have to play with the formatting */
border-left: none;
border-right: none;
}
This will give a top and bottom border to each data cell, which should do what you need it to. Play a little with the formatting to make sure you get it right.