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.
Related
So I have a table with only the outside bordered. This is what I want. However, I would also like the bottom of the <thead> section to have a border. So basically, there will be a horizontal line between the header row and all the other rows. However, I can't make this happen.
I tried doing something like:
thead {
border-bottom-style: solid;
}
but this doesn't produce anything. I also tried:
th {
border-bottom-style: solid;
border-width: thin;
}
But this leaves very small gaps between each column.
It should look something like this JSFiddle but without the gaps in between (this uses my second code suggestion): http://jsfiddle.net/C8mjK/2/
Any suggestions?
You can add this to your table css:
table { border-collapse: collapse; }
This will remove the spacing in between the borders of each table cell.
Updated fiddle example:
http://jsfiddle.net/C8mjK/4/
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)
I have a 'special' table on one page, that's borders I would like invisible. I'd like it to differ from standard css rules. Here is a screenshot:
before http://eliteshift.com/redbeancoffee/images/before.jpg
And here is what I want:
after http://eliteshift.com/redbeancoffee/images/after.jpg
I've made a second 'class' called 'award', and I can attribute certain traits (such as width), but I cannot for the life of me remove the boarder.
What's the css for a transparent border?
I've tried:
table.award {
border-collapse: collapse;
border-spacing:0;
width:60%;
}
border-color: transparent; will make it transparent.
border:none; will remove the border, which sounds like what you actually want in this case.
From the sounds of it, do you actually need a border? Would the following work?
table.award{
border: none;
/*other css attributes omited*/
}
I find that border: 2px solid transparent doesn't make it truly transparent all the time.
To make sure that you have a transparent border with a fixed width, use margins instead:
margin: 2px
will do the trick
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.