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/
Related
For some reasons, I have to apply inline td width in a table, see lower part of table at this page using Chrome at this page
Firefox and IE seem to render this well, however, Chrome is rendering the width differently. Applying left and right paddings on tds, seem to have the same issues with Chrome.
Any ideas? Again, I need to do this inline. Global CSS seems to do render more issues with the site globally.
Try this
Remove width="" for all td's
and apply below css
CSS
.dataTables_wrapper table td {
padding: 0.5em 0 0em 0;
}
.view-footer td:first-child,
.dataTables_wrapper table td:first-child {
width: 120px;
}
The problem is allocating space for table column varying each browsers when you have not assign any width. so assign some width to your td will resolve the problem. Just add the following class in CSS to fix this problem.
#datatable-1 tr td:first-child
{
width:1%;
}
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 have a bit of an annoying issue whereby my tables seem to be appearing completely differently between browsers, they are set as:
<table width="100%" border="1" cellpadding="4" cellspacing="0" bordercolor="#eeeeee">
So the left one (Chrome) is correct at #eeeeee, but FF and IE just seem to be making it up as they go along!!
There is nothing in my CSS that is event vaguely close to specifying a table border (I even tried un-linking my CSS files and the issue remained)
Any ideas?
#Darkat Studios
<table width="100%" border="1" cellpadding="4" cellspacing="0" style="border: 2px solid #eeeeee;"> - now there IS indeed a light grey border, HOWEVER the cells are all still black outlined.. VERY odd! –
you should remove the border="1"
Try this CSS
table{
border-collapse: collapse;
border: 1px solid #eee;
width: 100%;
}
table th,
table td
{
padding: 4px;
}
And change your HTML to simply state
<table>
Give that in CSS:
table {border: 2px solid #eeeeee;}
Or at least:
table {border-style: solid;}
Now check in all the browsers.
Yes, the implementation of the nonstandard attribute bordercolor varies across browsers. It even depends on browser mode (Standards vs. Quirks mode).
You can make the situation more consistent by setting, in CSS, all border properties on the table element and its cells. Or you could style the table and its cells in CSS only.
Try remove the '#' bordercolor="eeeeee"
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>
I have a peculiar and frustrating problem. For the simple markup:
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
You need to add this to your CSS:
table { border-collapse:collapse }
to remove the border , juste using css like this :
td {
border-style : hidden!important;
}
Modify your HTML like this:
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
In CSS, you could do the following:
table {
border-collapse: collapse;
}
Set the cellspacing attribute of the table to 0.
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
You may also want to add
table td { border:0; }
the above is equivalent to setting cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
Try assigning the style of border: 0px; border-collapse: collapse; to the table element.
sometimes even after clearing borders.
the reason is that you have images inside the td, giving the images display:block solves it.