Here what I want to achieve: http://jsfiddle.net/LxwXc/3/
When I have this code in my website, I have gaps between tds. Do you have any ideas what can it be? I am just going crazy...
.goodtable td
{
border-bottom: 1px solid black;
border-left: none;
border-right: none;
border-top: none;
padding: 10px;
}
</style>
<table class="goodtable" cellpadding="10" cellspacing="8">
<tr>
<td width="150px">Username:</td>
<td width="150px">opera</td>
</tr>
<tr>
<td>Gender:</td>
<td>Male</td>
</tr>
<tr>
<td>Age:</td>
<td>19 (1992-01-01)</td>
</tr>
<tr>
<td>Country, city:</td>
<td>hey, Afghanistan</td>
</tr>
<tr>
<td>Height:</td>
<td>187 centimetres</td>
</tr>
</table>
You have cellpadding and cellspacing set. Those are causing the gaps.
Get rid of them, and define padding values inside the td instead.
Alternatively, you can set border-collapse: collapse; but in that case, use the border-spacing CSS property to set the spaces. cellspacing and cellpadding are deprecated.
Related
I have looked for many posts but I could not find an answer that suits this problem. I have tried with table-layout:fixed, changing widths to extreme values but the attribute width is still being ignored. Here is my code:
<table style="width:100%; table-layout:fixed; border: 1pt solid black;
border-collapse: collapse;" border cellpadding=3 cellspacing=0>
<tr>
<th align=center colspan="4"
style="width:100%; color:white; background-color:#475678; font-weight:bold;">
Oferta de traducción para: ' . $cliente . '
</th>
</tr>
<tr>
<td style="border-right:1pt solid black; width:10%;">Fecha</td>
<td align=center style="border-right:1pt solid black; width:10%;">Fecha</td>
<td style="border-right:1pt solid black; width:40%;"></td>
<td style="width:30%;">Fecha</td>
</tr>
</table>
Your issue was using table-layout: fixed;
Here is my retake on it.
Within the <style> you should put this into your css but assign an id or class to it if you're using tables elsewhere that are different:
table {
width: 100%;
border:1pt solid black;
border-collapse: collapse;
}
table td {
width:25%;
border-right: 1pt solid black;
text-align: center;
}
table th {
width: 100%;
color: white;
background: #475678;
font-weight:bold;
}
<table cellpadding="3" cellspacing="0">
<tr>
<th align=center colspan="4">Oferta de traducción para: ' . $cliente . '</td>
</tr>
<tr>
<td>Fecha</td>
<td>Fecha</td>
<td></td>
<td>Fecha</td>
</tr>
</table>
If you want to keep your CSS in the actual code, just remove the table-layout from <table> styling.
the table-layout: fixed is the one that ignores your widths.
from MDN HTML table-layout says like this about the table-layout: fixed,
Table and column widths are set by the widths of table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
Try remove table-layout:fixed; and it will work.
Html is not my specialty :)
I have an Html table and I want to have a solid line between each row. I've done it by defining a border-bottom on each <td> tag, like so:
<td style="border-bottom: 1px solid #0066ff;">[content]</td>
But it comes out with a one-pixel gap in the line, as seen below:
I tried putting the border-bottom in the <tr> tag, but that didn't work at all. What's the correct way to do this?
You may use the CSS attribute border-collapse and set it to collapse:
table
{
border-collapse: collapse;
}
td
{
border-bottom: solid 1px black;
}
<table>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
Try this.
table {
border-collapse: collapse;
}
td {
padding: 10px 0;
}
tr {
border-bottom: 1px solid #0066ff;
}
Give cellspacing 0 to the table
<table cellspacing="0">
<tr>
<td style="border-bottom: solid 1px;">sdfa</td>
<td style="border-bottom: solid 1px;">asfsaf</td>
</tr>
</table>
Example: JSFiddle
I noticed that when I apply a border-style to my table tag, it only works for solid, dashed or dotted, but it doesn't for double, groove and so on.
Is there a limitation for border-style for tables? Or am I doing something wrong?
<table border="1px" style="border-collapse:collapse; 1px black; border-style:double;">
<thead>
<tr>
<th colspan="2" style="padding:5px; background-color:blue; color:white; font-family:Arial; font-size:14px">Pricelist</th>
</tr>
<tr>
<th style="padding:5px">Product</th>
<th style="padding:5px">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px">item1</td>
<td style="padding:5px">price1</td>
</tr>
<tr>
<td style="padding:5px">item2</td>
<td style="padding:5px">price2</td>
</tr>
<tr>
<td style="padding:5px">item3</td>
<td style="padding:5px">price3</td>
</tr>
</tbody>
</table>
You should put 1px black into the property like, border-width: 1px; border-color: black; border-style: double; or just use border: 1px black double; to make it work. The border="1px" works "inside" the table, which you can set styles of tr, td, and th in css. I set different widths, 1px inside and 10px outside for you to see the differences clearly.
<table border="1px" style="border: 10px black double;">
<thead>
<tr>
<th colspan="2" style="padding:5px; background-color:blue; color:white; font-family:Arial; font-size:14px">Pricelist</th>
</tr>
<tr>
<th style="padding:5px">Product</th>
<th style="padding:5px">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px">item1</td>
<td style="padding:5px">price1</td>
</tr>
<tr>
<td style="padding:5px">item2</td>
<td style="padding:5px">price2</td>
</tr>
<tr>
<td style="padding:5px">item3</td>
<td style="padding:5px">price3</td>
</tr>
</tbody>
</table>
Your table border needs a "width." Try..
table {
border-collapse: collapse;
border-style: double;
border-width: 4px;
Border Width is Too Small.
Specifying too small of a border-width will not allow for the border-style to be double. Essentially, it's too small to show two separate lines.
For example, if use something like border-top: #333 double 1px; then only a single line will be shown.
In fact, using 2px for the width, like border-top: #333 double 2px;, will still not show a double line. Instead, it will just show a thicker, 2px-wide line.
I had to use at least 3px for the double border to show properly, like border-top: #333 double 3px;.
This makes sense, considering it takes 3 pixels to show two 1px lines with a 1px gap between them.
1px (line) + 1px (gap) + 1px (line) = 3px
So your two options are:
Specify a bigger border-width, like border-top: #333 double 3px;.
-or-
Do not specify the border-width, like border-top: #333 double;, and let the browser/renderer figure it out.
Hopefully that helps others.
I am trying to make a table with rounded corners AND a single solid border between <tr>'s. However, I seem to have a bit of a problem correctly using border-collapse. When I set border-collapse: separate, I get the following:
Result - border-collapse: separate
Code
HTML
<table>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
CSS
table, tr {
border: 1px solid black;
border-collapse: separate;
border-color: #ACACAC;
border-radius: 5px;
}
However, when I use border-collapse: collapse, I get the correct line between the <tr>'s but the corners are not rounded, as see here:
Result - border-collapse: collapse
Does anyone know how to get both the line between the <tr>'s WITH the rounded corners?
Thanks so much!
Add cellpadding = 0 and cellspacing = 0 at the table element ,remove border-bottom of the tr elments and add this CSS border-bottom for all td elements except last one like:
tr:not(:last-child) td{
border-bottom:1pt solid #ACACAC;
}
table,
tr {
border: 1px solid black;
border-color: #ACACAC;
border-radius: 5px;
}
td {
padding: 5px;
}
tr:not(:last-child) td {
border-bottom: 1pt solid #ACACAC;
}
<table cellspacing=0 cellpadding=0>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
It is working :
http://jsfiddle.net/csdtesting/dngpq4hb/3/
I am targeting Chrome and other CSS3 compliant browsers and would like to have border separation for every other row.
The CSS I currently have working for every row looks like this-
table{
border-collapse:separate;
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
What I would like to achieve is this:
CSS
table{
border-collapse:separate;
}
table tr:nth-of-type(odd){
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
HTML
<table>
<tr>
<td>a-one</td><td>a-two</td><td>a-three</td>
</tr>
<tr>
<td>a-four</td><td>a-five</td><td>a-six</td>
</tr>
<tr>
<td>b-one</td><td>b-two</td><td>b-three</td>
</tr>
<tr>
<td>b-four</td><td>b-five</td><td>b-six</td>
</tr>
<tr>
<td>c-one</td><td>c-two</td><td>c-three</td>
</tr>
<tr>
<td>c-four</td><td>c-five</td><td>c-six</td>
</tr>
</table>
The data is in two row sets and needs to be connected, whereas different sets need to be separated. I would like to keep it in table form to take advantage of the browsers auto-column widths. It seems like border-spacing can only be achieved on the table level. I am already using borders for styling so transparent borders is not a viable option.
Any chance for me- or I am I stuck?
JS-fiddle here identical to above here: http://jsfiddle.net/sSba4/
I'd argue that if the data needs to be visually chunked in separate containers, perhaps the most semantic solution would involve using multiple tables.
However, if you want to keep everything in a single table for whatever reason, then you would need to introduce non-semantic markup to create those visual separations, as border-spacing is a property of the table, not of the row or cell.
<table>
<tr><th></th></tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
</tr>
<tr><th></th></tr>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
<tr><th></th></tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
</table>
CSS
table {
border-collapse:collapse;
}
table tr td {
border: solid #ccc 1px;
padding: 5px 7px;
}
table tr th {
border: none;
padding-top: 5px;
}
See it in action here http://jsfiddle.net/wYCNg/
How about adding an additional row with transparent borders?
html:
<table>
<tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
<tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
<tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
<tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>
</table>
css:
table{
border-collapse:collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
tr.break, tr.break td{
border:none;
height:5px;
padding:0;
}
I've just been considering the same matter. If you put div element inside td, you can use plenty of box-model properties, eg. margin. If you additionally hide td borders you can use margin to set space between cells, rows, cols.
#tab {
border-collapse:collapse;
}
#tab td{
padding:0px;
}
#tab td>div {
width:50px;
height:50px;
background-color:#97FFF8;
margin:1px;
}
#tab td:nth-child(1)>div {
margin-right:10px;
}
#tab tr:nth-child(1) div {
margin-bottom:10px;
}
<table id="tab">
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>