Can you please take a look at this Demo and let me know why there are lines between the cells in the table while there is no border setting?
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
You can add
table{
border-collapse:collapse;
}
To collapse the borders
Fiddle
The default browser style add a padding of one pixel on table cells tags.
To avoid default browser css you can use a css file like http://meyerweb.com/eric/tools/css/reset/
You can also remove all borders in your table by using the border-spacing or border-collapse property on your table tag.
table {
border-spacing: 0;
}
or
table {
border-collapse: 0;
}
Use:
<table style="width:300px" cellspacing="0">
fiddle
The lines are caused by spacing between cells. It is empty space, which means that normally the background of the table (here, green) shines thru. This spacing is often described as “border spacing”, since it can be seen as spacing between logical borders. If no border has been set, like here, the borders still logically exist, though as zero width. For two adjacent cells, we thus have the setup
...[cell1 content] [right padding] [right border] [border spacing] [left border of cell2] [left padding of cell1] [cell1 content]...
So although it may look like a border, it is really spacing between (invisible) borders.
There are several ways to remove it:
Use the HTML attribute cellspacing=0 on the table element. This is supported by all browsers that render tables normally. Nominally, the attribute is deprecated in HTML 4, obsolete and nonconforming in HTML5, but browsers are still expected to keep supporting it.
Use table { border-spacing: 0 }, which corresponds to the HTML attribute. Browser support is good, but still more limited than for the other methods. This method lets you set nonzero border spacing for borders between rows, e.g. table {border-spacing: 0 2px}.
Use table { border-collapse: collapse }, which has very good browser support. It causes the collapsing border model to be used, with possible side effects. It makes the borders (possibly virtual, zero-width borders) of adjacent cells to coincide, so there cannot be any border spacing between them.
Related
I have an issue that seems to be isolated to Chrome...which is usually NOT the way it goes. However, I have recreated the issue as purely as possible in the following plunkr.
http://plnkr.co/edit/k0viyc
To illustrate the problem, here is an image that displays the border in the highlighted row in Chrome and how it isn't showing in IE.
If you remove either of the following rows:
<tr class="spacer">
<td colspan="14" class="noBorder noBackground">
*** By removing this row, the extended border goes away ***
</td>
</tr>
You will see the associated border shows/hides.
We've been through lots of tests on this and can't isolate the problem. The primary css remains in the plunkr, including the inline styles and classes that are primarily byproducts of related bindings.
I would like to know if there is an error in the current design or if this is truly a bug in Chrome. If it's a bug, what is the least common elements here needed to recreate it? Is it worth submitting as a bug or is this just going to be a scenario we should just try to avoid.
Thanks for your time in advance.
Looks like to be a Chrome bug.
Minimal showcase reproducing it
.test {
border-collapse: collapse;
}
td {
border: solid 1px blue;
}
.no {
border: none;
}
<table class="test">
<tr>
<td>one</td>
<td class="no">two</td>
</tr>
<tr>
<td class="no" colspan="2">double</td>
</tr>
</table>
Chromium tracking (somehow) related border rendering bug
A little disturbing the mention
It's a known (old) issue in our table code. Collapsing borders are
determined based on adjacent cells and our code doesn't deal correctly
with spanning cells (we only consider the cell adjoining the first row
/ column in a row / column span). On top of that, our border
granularity is determined by the cell's span.
To fix this bug, we would need to overhaul our collapsing border code,
which is a big undertaking.
In conclusion:
If the table has border-collapse
and the cell is colspaning
Then different border settings (for that cell, implicitly) will fail
Posibilities to fix it:
Setting border-style: hidden to the cell has higher priority and will hide all the borders (not good)
Removing colspan in the spacers
or maybe remove fully the spacers rows and handle the display without them.
Some glitch related to tr.spacer.
As a workaround set colspan=7 to td in tr.spacer.
Since this seems to be a bug with Chrome—instead of using a colspan, you could write out the remaining cells needed to complete the row, and be sure that they don't have a class that includes a border.
This:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="3" class="no-border"> </td></tr>
Would become:
<tr><td class="border">1</td><td class="border">2</td><td class="no-border">3</td></tr>
<tr><td colspan="2" class="no-border"> </td><td class="no-border"> </td></tr>
I had to use border-collapse, and was having the same problem. This simple HTML markup change worked for me.
After days of this issue being on my mind, a super hacky solution finally hit me.
Set the border color to the same color as your background.
td {
border: 1px solid (background color);
}
A table with two cells side by side:
<table>
<td disabled>Something Here</td>
<td style="margin-left:100px;" disabled>Second Cell</td>
</table>
The margin-left:100px does nothing to separate the second cell from the first cell. How do I create space to the left of the second cell?
Padding Left
padding-left:100px
Produces this result:
The content of the second cell now has 100px of space added to the left. The position of the cell background however remains unchanged.
Border-spacing
<table style="border-spacing: 100px 0; margin: 0 -100px">
Produces this result:
If I add a third table cell, I get this result:
I don't want spacing between every cell, just the second one.
Cellspacing
cellspacing in the table element creates spacing around every cell. I don't want that either, and one source states that cellspacing is not supported in HTML5.
Margin wont work with table cells. Try padding or cellspacing="" to table.
Or add a div inside the table cell and apply margin to the div.
<td style="padding-left:100px;" disabled>Second Cell</td>
According to CSS specifications, margin properties do not apply to table cells (elements with display: table-cell). It is valid to set them, but the setting has no effect.
The way to separate the cells of a table is to set border-spacing on the table element, e.g. with <table style="border-spacing: 100px 0">. However, this also sets the spacing between the cells and the edges of the table. This effect can be cleared using negative margins:
<table style="border-spacing: 100px 0; margin: 0 -100px">
<td disabled>Something Here</td>
<td disabled>Second Cell</td>
</table>
Caveat: IE 7 (and older) does not support border-spacing, but it supports margin properties, so on it the result would be all wrong. If this is relevant, put the CSS code in a style element and wrap it inside a “pseudocomment” that makes IE 7 and older ignore it.
Depending on the context, the simpler method of just setting left margin on the second cell may work well. However, it creates spacing inside the second cell, not between the cells. The difference between this and cell spacing matters e.g. if cells have backgrounds or borders.
Add another <td> element, set text color to same as background, and background-color to transparent, enter number of characters you want for spacing.
Illustration with background shown for display purposes:
<table>
<td>Something Here</td>
<td style='color:white; background-color: green'>123456</td>
<td>Second Cell</td>
<td>Third Cell</td>
</table>
Creates a 'Dummy Cell' with a spacing of 6 characters. Now set background to transparent.
Cell Background Set to Transparent and Text Color set to same as Parent Element.
<table>
<td>Something Here</td>
<td style='color:white; background-color: transparent;'>123456</td>
<td>Second Cell</td>
<td>Third Cell</td>
</table>
So far, my preferred method would be to simply add another <td> element for spacing. But I'm open to any better solution.
Today it's my first time I'm playing around with tables
and I have noticing that the table and tr and td tags have a little space between them,
like 1 px or so.
So here is my problem :
There is my code :
<table id="upload_box_container">
<tr>
<td class="border_bottom_1px">hi1</td>
<td class="border_bottom_1px">hi2</td>
</tr>
</table>
(upload_box_container - it's just background color and border color)
(border_bottom_1px - as it's name it only gives bottom border with 1px size)
and there is a picture of how it displays:
http://postimage.org/image/16wz2ao78/
My question is
why there is a space between the two bottom borders
and why there is a space in the sides of the table (like padding) and the borders don't touch the table border
thanks.
Define
table { border-spacing:0; }
and it should render in the way you want.
You need to reset the default styles applied by the browser.
Try at the top of your css file:
table, table tr, table td { padding:none;border:none;border-spacing:0;}
And check into some popular CSS resets out there:
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
I prefer to use this approach:
table { table-layout:fixed; border-collapse:collapse; }
i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it does not align the text centered.
example:
<table id="myTable" cellspacing="5">
<colgroup id="names"></colgroup>
<colgroup id="col20" class="datacol"></colgroup>
<colgroup id="col19" class="datacol"></colgroup>
<colgroup id="col18" class="datacol"></colgroup>
<thead>
<th> </th>
<th>20</th>
<th>19</th>
<th>18</th>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
#names {
width: 200px;
}
#myTable .datacol {
text-align: center;
background-color: red;
}
Only a limited set of CSS properties applies to columns, and text-align isn't one of them.
See "The mystery of why only four properties apply to table columns" for a description of why this is the case.
In your simple example, the easiest way to fix it would be to add these rules:
#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }
That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.
Oh, and your HTML is invalid. <thead> misses a <tr>.
See similar question: Why is styling table columns not allowed?
You are only allowed to set border, background, width and visibility properties, due to the fact that cells aren't direct descendents of columns, only of rows.
There are a few solutions. The simplest is to add a class to each cell in the column. Unfortunately that means more HTML but shouldn't bee a problem if you're generating tables from a database etc.
Another solution for modern browsers (i.e. not IE6) is to use some pseudo classes. tr > td:first-child will select the first cell in a row. Opera, Safari, Chrome and Firefox 3.5 also support the :nth-child(n) selector so you can target specific columns.
You could also use td+td to select from the second column onwards (it actually means "select all td elements that have one td element to its left). td+td+td selects from the third column - you can continue in this fashion, overriding properties. Honestly though, it's not great code.
With the following CSS, you can just append one or more classes to the the table element in order to align its columns accordingly.
CSS
.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}
HTML
<table class="col2-right col3-right">
<tr>
<td>Column 1 will be left</td>
<td>Column 2 will be right</td>
<td>Column 2 will be right</td>
</tr>
</table>
Example: http://jsfiddle.net/HHZsw/
In addition to the limitations mentioned in other answers, as of February 2018, visibility:collapse still does not work on colgroups in Chrome and Chromium based browsers, due to a bug. See "CSS col visibility:collapse does not work on Chrome". So I believe the currently usable properties are just border, background, width (unless you employ some sort of polyfill for Chrome and other Chromium-based browsers). The bug can be tracked at https://crbug.com/174167 .
I have an empty table row just for separation between rows.
<tr>
<td colspan="5"></td>
</tr>
It's rendered in IE, FF, Opera and Safari. The question is, whether I should put some content inside of it or it is okay to leave it as it is?
Like:
<tr>
<td colspan="5"> </td>
</tr>
Well you could put an as column content to make sure the rows are displayed. The better way is to use CSS for spacing though.
Semantically, does the empty row serve a purpose, or is it purely for layout? If the latter, it may be worth considering dropping the empty row, and providing the separation via CSS. E.g.
<tr class="separate-below">
<td>Data before separater</td><td>More Data</td>...
</tr>
<tr>
<td>Data after separater</td><td>More Data</td>...
</tr>
With the following in the stylesheet:
TR.separate-below TD,TR.separate-below TH {
border-bottom: 1em solid white; /* use the background colour of a cell here */
}
Alternatively, you can use multiple <tbody> elements to group blocks of rows together (adding rules="groups" to the table element causes <tbody> elements to gain a horizontal border at top and bottom, and <colgroup> element to gain a border to their left and right):
<table rules="groups">
<thead>
<tr><th>Header</th><th>Header</th>...</tr>
</thead>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
<tbody>
<tr><td>Data</td><td>Data</td>...</tr>
...
</tbody>
...
</table>
As you can see in this example from W3Schools using the is the best way to do what you want.
This is a very old question, but if somebody still needs a solution (problem exists with display: table-cell or table-row elements)
here's the solution:
.emptyElement:after{
content: "\00a0";
}
I wanted to add my solution which is a modification of #Dariusz Sikorski solution.
td:empty:after, th:empty:after {
content: "\00a0";
}
if you want to put content inside, i would use a no-breaking-space: , rather than a normal blank
You may have already tried this but if your trying to add some space in between rows have you tried adding some padding.
CELLSPACING=Length (spacing between cells)
CELLPADDING=Length (spacing within cells)
Karl
To ensure that empty cells are displayed the following CSS can be used:
table { empty-cells:show; }
You can use multiple tbody tags to group table rows. It's totally valid and more semantic.