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.
Related
I'm trying to create this table layout. Basically the orange 18 you see in the grid means 18% usage between 11am and 12pm on Tuesday. So that's why the hours along the top are best on the edges of the table cell, not in the middle of the cell. That way it's showing the data representing usage over a one hour time range.
I have basically applied a basic hack and right aligned the hours along the top so they kinda look like they're inbetween the cells. This isn't perfect as you can see.
What I want to do is actually have the hours along the top centered nicely between the data cells. I think I could do it with a fixed size column widths, but the table needs to stretch to 100% of the page width and the column widths a percentage. Then it's scalable down to a smaller browser.
Is there a way to do this in HTML and CSS?
To have the first row truly centered between the bottom cells with a single table you can use colspan + widths in percentages without using positioning. That way it will be fluid, it will work with any font, and it won't get screwed when you use 2 digit numbers.
HTML:
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<th colspan="2">1</th>
<td> </td>
</tr>
<tr>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
<td colspan="2">0</td>
</tr>
</tbody>
</table>
CSS:
table {
text-align: center;
width: 70%;
}
table td {
width:8.33%; // 100% divided by (double the number of bottom cells)
}
table th {
width:16.66%; // 200% divided by (double the number of bottom cells)
}
table td[colspan="2"] {
background:yellow;
}
table td,
table th {
outline:1px solid tan;
}
Demo: http://jsfiddle.net/G7KZe/
You could use position: relative; to place your month numbers to be where you want but it's tricky because table cells often behave weirdly with CSS positioning. And the exact positioning can depend on the font used.
I've come up with a solution that requires 2 tables. The idea is to have one table for the headings, one table for the content. The trick is to have 1 cell less in the headings.
Live example: http://jsfiddle.net/w6TnE/
As you can see, the month numbers are perfectly aligned with the borders. But keep in mind that this setup requires a fixed width, in this case, 60px:
td, th{ border:1px solid #ccc; padding:5px 0; text-align:center; width:60px;}
I just added some additional styling to make it clear.
You can use an absolutely positioned element inside a relatively positioned element to get the effect you want. The idea is to style the <th> elements with position: relative and then style the hour numbers themselves in an element with position: absolute. You can then position the numbers anywhere you want in relation to the cell.
Here is an example jsfiddle. To adjust the position of the numbers you may want to use a pixel value instead of a percentage for the right property in the th > span block.
For more information, you might want to read about the different positioning methods.
table td{ text-align:center;}
This will align the text of each cell to the center.
You could always wrap each of the table heading text in like a <div> tag and use the css position:relative and left:2px or whatever number of pixels to make it look good.
example
<table>
<tr>
<th style="text-align:right;"><div style="position:relative;left:2px;">1</div></th>
</tr>
</table>
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.
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.
I am creating a bunch of tables now as and when I add table header (<th>)table row <tr> and add border to it there are multiple borders coming up. I mean say I have two table headers in a row so each and every th tag will add its own border but I just want want border between the two table header's (th).
<table>
<th>Header1</th>
<th>Header2</th>
<tr><td>Data1</td><td>Data2</td> </tr>
</table>
If you refer the above code and if I add borders to say th tag there will be 2 borders between header1 and header2. I just want 1.
Your problem description is vague (in the future, please come up with an SSCCE, so that everyone can just copy'n'paste'n'run it to see what you exactly mean), but at least, a common solution to this "double border" problem is to add border-collapse: collapse property to the parent table in question:
table {
border-collapse: collapse;
}
Also see this Quirksmode article for several examples.
Set border-collapse:collapse for both table and th in your CSS:
table, th, td { border-collapse:collapse }
If you are guaranteed to have 2 and only 2 th columns, and if I'm reading your question right that you just want a border between the two (i.e. in the middle of the two th tags), then just apply a border-right to the left th:
table
{
border-collapse: collapse;
}
th.leftColumn
{
border-right:1px solid #000;
}
Markup
<table>
<tr>
<th class="leftColumn"> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
It's quick and dirty, but if you know you have only 2 columns it would work. Again this is assuming your question is that you want a border between two th cells, and nowhere else.