How can I make the border-right of my <td> meet with the border-right of my <th> above it? there is a little gap between them. is there a way to make it extend further down or make the left border of the <td> extend further up?
To collapse your borders, use the border-collapse property:
border-collapse: collapse;
This gets rid of the spacing between your table borders.
Never mind sorry I found it. its cellspacing=0
You probably have to set border-spacing to 0px in your CSS.
Related
I want to apply left border on my th element in table. The problem is, when I put border CSS style there is an empty "space" after line (tr) - see image.
<table>
<tr>
<th>
....
<th>
</tr>
<tr>
<th>
....
<th>
</tr>
</table>
I am using border-left: 1px solid #2185d0; for all th elements
But I want full line like this:
How can I do this?
Perhaps add this to your css?
table {
border-collapse: collapse;
}
I think the problem is in the CSS styles you are attributing to the table. It would really help if you could provide code snippits for that (specifically).
What I suspect is that you have either margin or padding settings that are preventing the table cells from touching eachother, thus producing a space between the border lines.
Why right and down border is invisible?
Here is my table:
http://jsfiddle.net/dFu5e/
You're writing white TD borders over the table border.
You can fix the problem by setting the table border to 2 px.
DEMO
But instead of all those border definitions, I would recommend for next time to use CSS. There are many tools helping you define the CSS of tables for your goals. For example :
http://www.somacon.com/p141.php
http://www.css-generators.com/css-tools/css-table-generator
Remove tr and td border.
Use border="1" and cellpadding="0" and cellspacing="0" for table tag:
<table border="1" cellpadding="0" cellspacing="0">
....
</table>
Or you can remove the overflow: hidden from the table.
It is because you are using overflow:hidden. modified jsfiddle
Remove overflow: hidden; from your table style, fiddle here.
I have a table in which I don't want to set padding &/or margin on each td to apply some spacing between cells, First answer would be to use CellSpacing and/or CellPadding properties of table but when I use these properties they apply space on every side(i.e. on top, bottom, left and right) but I just want to apply space on Top and Bottom.
Is there any solution to my problem?
Use empty row for spacing
See the example below
<table class="style1">
<tr style="height: 20px;">
<td>
sfgefgfeg</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 5px;" >
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
</table>
Here the row with height 5px is added for spacing.
You could use border-top and border-bottom on the TD elements and make the colour of the border the same as the background colour of your page.
You can always use padding with <td> to have space on top and bottom in table cell.
To add spacing between rows of table, set <tr> as block element then you can use margin property on that.
Check the demo here http://codepen.io/pen/10248/2
Edits:
Updated to contain spacing between rows.
The alternative ways to create spacing between cells (so that the spacing appears between borders, if cells have borders) is to use cellspacing attribute on a table element in HTML and to use the border-spacing property in CSS. The former suffers from the inflexibility mentioned in the question. The latter has limited browser support. You could use both, so that older browsers use the simple HTML spacing and newer browsers the CSS way.
The following example sets a vertical spacing (i.e., between rows) of 0.5em and a smaller, 0.1em, horizontal spacing (i.e., between columns).
table { border-spacing: 0.1em 0.3em; }
(The order deviates from the usual order in CSS property values: here horizontal comes first, then vertical, whereas e.g. in margin: 0.1em 0.3m an opposite order applies.)
you can simulate spacing by adding border-bottom: 3px solid #fff (change color as you need, same for top)
On this page I would like to add a white gap between the background of the "Before" and "After table headings, that aligns with the gap between the photos in each column
I've tried setting the width, max-width and margin-right properties of the "Before" heading and also tried setting the margin-left of the "After" heading, but none of these seem to work.
Thanks,
Don
Easiest way is using colgroup and set a border to act as margin.
<table>
<colgroup />
<colgroup style="border-left:5px solid #fff;" />
See also: http://jsfiddle.net/gwYaQ/
A table is easiest I admit, but it's not really tabular data is it.
You're abusing the table for layout =P
Info about colgroup: http://www.w3schools.com/tags/tag_colgroup.asp
There's a rather dirty way, but does the job:
<tr>
<th>Before</th>
<th style="width: 10px; background: none;"> </th>
<th>After</th>
</tr>
<tr>
<td>IMG1</td>
<td>&nbps;</td>
<td>IMG2</td>
</tr>
I don't think you can achieve that simply changing your CSS.
The white gap between the photo is due to the table cells padding-right (10px), so it's "inside" the cell.
The gradient in the heading being the backgound of the heading cells, a white space between them would have to be "ouside".
On way to fix this would be to add a 10px wide column between the 2 columns. Another is to use colgroup.
But BGerrissen is right : you should not use for that.
th {
padding-left: 50px;
}
td {
padding-left: 50px;
}
I have an html table in which I am placing images side by side inside the td's. How can I get it so that there is no space at all between each image? By default all browsers seem to put in a small space despite 0 padding and margin on each table element. I am not specifying a width on the td's so by default it takes up the width of the image inside of it.
i.e:
<table>
<tr>
<td><img ... /></td> //no space between the td's
<td><img ... /></td>
</tr>
</table>
One more thing that can avoid unwanted space between images:
<td style="line-height:0;">
Apply this css:
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse; }
This resets all spaces to 0.
cellspacing and cellpadding should be 0 on the table.
<table cellspacing="0" cellpadding="0">
<tr>
<td><img></td>
<td><img></td>
</tr>
</table>
Take a look at cellpadding, border, and cellspacing attributes for the HTML table tag. If you are using XHTML or CSS, then check out the corresponding styles - border-collapse, padding, etc.
On my situation, I am trying to continue coding photoshop / imageready splitted html (generated via slice tool or save for web).
If table have a "height" attribute and you replace some images with shorter content, table maintain height adding mysterios gaps between images.
All I have to remove the height. Simple and stupid, but this is a situation can happen.