I have a html table with 3 rows and 1 column. In the top and button row I have images and in the middle row I have div.
Between my rows I see a separation (I see background of my page). I tried to set all padding and margins to zero (for tables, div and images) and I still have this separation. Can anybody, please, help me to solve this problem.
Try using 'border-collapse':
table {
border-collapse: collapse;
}
Set the cellspacing=0 in the <table> tag as well as cellpadding=0.
Use this in img tag :
display: block;
Gonzohunter nailed this, alright, but you may find it easier to just set the style on the table, assuming you are in a recent HTML version.
I used
<table style='border-collapse: collapse;'>
...
</table>
This worked perfectly.
It seems that it's your H2 that's causing it. To fix it, set the top margin of it to zero:
<h2 style="margin-top: 0;"><span class="text">Welcome to the Colored Trails Game Page!</span></h2>
You need to eliminate spacing from the table cells themselves.
In CSS:
<style type="text/css">
td {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
}
</style>
Or in HTML 4.01/XHTML 1.0 DTD (Strict or Transitional):
<table cellspacing="0" cellpadding="0">
[...]
</table>
Related
As part of redesigning a site, I am trying to style a table with css.
<table width="100%" cellpadding="0" cellspacing="0" border="0">
I ended up with this:
<table class="table1">
.table1 {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: colapse;
padding : 0;
}
The weird problem: when applying the css style to the table, the result is slightly different. The space between cells is slightly larger.
Please see the jsfiddles:
Table not style with css: http://jsfiddle.net/32534/1/
Table styled with css: http://jsfiddle.net/47AUR/1/
Why the extra space between the text inputs? What am I doing wrong?! Thank you!
Edit: Using Google Chrome.
cellpadding affects td padding too, so simply add:
.table1 td{
padding: 0;
}
By default chrome adds it's default styling:
`border-spacing: 2px;` on the table.
In http://jsfiddle.net/32534/1/ you haven't mentioned any styling for table. Hence it's picking up default style of chrome.
But in next fiddle link: http://jsfiddle.net/47AUR/1/ you have specifically mentioned the style for the table, which overwrites the default style of chrome.
It's a good idea to use reset.css to be consistent across all browser's and ignore the default styling of all browser's
Simply add
td {
padding: 0px;
}
it will work with a padding:0 on the td (as that is what the cellpadding affects) elements and a second l to colapse
demo at http://jsfiddle.net/at4yL/
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
I know this is an oft asked question, but I've tried some of the solutions (such as How to make separating lines/borders in a table disappear with CSS?) but I still can't quite get it.
I have defined via css a table structure with alternating row colors. I'd like the (in particular vertical) borders between teh cells to be invisible and so suppose I either need a zero td border width, or the alternating td border colors to be the same as the background colors.
Example below is what I've tried, in calling a table1 id from html, I get a nice alternating colored row table but with obvious cell borders still - appreciate your help.
#table1 table, tr, td, th {
border: 0;
}
#table1 tbody tr:nth-child(odd) {
background-color: #A3B9D2;
}
#table1 tbody tr:nth-child(even) {
background-color: #E7EDF3;
}
and then sample html;
<table id="table1" >
<tr>
<td>Test</td><td>(value)</td>
</tr>
<tr>
<td>Test2</td><td>(value2)</td>
</tr>
</table>
It's possible that what you're describing is cellspacing. If that's the case try this in your HTML:
<table cellpadding="0" cellspacing="0" border="0">
...
</table>
Cellspacing refers to the space between cells; it's not a border exactly. So, if you're seeing invisible or non-colored spaces between your tds, try adding the cellspacing="0" attribute to your table tag.
You can also use this style:
#table1 {border:0px solid transparent;}
Try this
#table1 {
border-collapse: collapse;
}
Using cellspacing="0" is indeed a sure-fire way to get rid of those pesky lines. But, personally, I've never liked it - because I have to apply it in each and every table that I create throughout a site, instead of in one neat, centralized spot.
So, I usually go for a solution like elclanrs's in a CSS file. The cool thing about that solution is that you can remove some of the tags ahead of it to apply lines/borders for just those.
So, in other words, to put a border around a table - without having all of the cells divvied up between lines too - you can do something like this:
tr, td, th
{
border: 0;
}
Good luck!
#table1 table, tr, td, th {} is wrong.
You should do:
#table1,
#table1 tr,
#table1 td { border: 0; }
It seems that you are applying the style to tables within table1. The first declaration should actually be:
#table1 {
border: 0;
}
or
table #table1 {
border: 0;
}
What browser are you using? For complete backwards compatibility you still need the cellspacing="0" attribute set on the table.
http://jsfiddle.net/RmhxH/
Try this:
table,td,tr,th{
border:0;
}
I want to create a table, where cellspacing is set to 0.
Currently I have the following HTML which works correctly. But I want to put the cellspacing to the CSS, but can't find the correct style for it.
<table class="overviewGrid" id="OrderTable" cellspacing="0px">
</table>
Can anybody help me?
Thx in advance
The CSS equivalent of <table>'s cellspacing attribute is border-spacing. However, Māris Kiseļovs' answer (border-collapse) is the one you should use to remove the cell spacing.
table {
border-collapse: collapse;
}
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Given the following HTML page a horizontal line appears at the top of the table where the 1st row would have a 2nd and 3rd cell (if they were defined).
<html>
<head>
<Title>Test Page</Title>
<style type="text/css">
table {
margin:10px 0 10px 0;
padding:0;
margin: 0 0 0 0;
border-collapse: collapse;
border: 0;
}
td {
border:1px solid #CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Test Title</td>
</tr>
<tr>
<td>Sub Title</td>
<td>Sub Title</td>
<td>Sub Title</td>
</tr>
<table>
</body>
</html>
I would like the line (highlighted below) removed by modifying CSS only. This line appears in Firefox but not IE6.
Note that I cannot modify the HTML in any way as this is generated by a third party system (the example above is simply to highlight the issue). This third-party system only allows me to modify the CSS.
This will get it to render without the top border in Firefox:
table, td {
border: 1px #CCC;
}
table {
margin: 0;
border-spacing: 0;
border-style: none none solid solid;
}
* html table {
border-collapse: collapse;
}
td {
border-style: solid solid none none;
padding: 5px;
}
It also works fine in IE7 for me. If it breaks in IE6, use conditional comments or css hacks to revert it to the state it was in your own code for IE6 only.
EDIT: Your third party tool is generating bad/invalid markup which will give you a very large browser compatibility/css headache, if it is at all feasible, replace it or generate the html yourself
Technically speaking the first row should be marked up as
<tr>
<td colspan="3">Test Title</td>
</tr>
So I don't think you can acheive that using tables.
A css tip
margin: 10px 0;
Puts 10px at the top and bottom and 0 on the left and right
The empty-cells property may help you in this case.
table {
empty-cells:hide;
}
Then again, maybe not. Can you also explicitly turn off the border of the table rows?
Is using javascript an option? You could inject a non breaking space into the cell, that should draw the border.
Here is the solution for this problem that really works. I found this out after sooo long
The problem is with tbody tag.
Check the solution here:
http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table
From Firefox Colspan Border-COllapse Bug:
The obvious workaround is to just set
the colspan before the DOM has
finished loading, or at minimum,
before the table has finished
rendering. However, this requires that
we clutter our otherwise clean HTML
with inline tags, or have
prior knowledge of the number of
columns at the HTML generation stage.
I hope to find a more elegant
"non-invasive JavaScript" solution in
the future, but at the current time I
don't know of one. Simply setting the
table's "display" style to "none" and
then re-setting it back to "block" did
not do the trick.