I've been confused for hours at this now; trying to make the table stay fully centred without a border. It seems for some reason that the table centres when a border is added to it i.e. -table.backColor {border: 1px solid;} rather than transparent...
Any help will be really appreciated.
The CSS ive been using is:
body {margin: 0;
}
td.backColorContent {
width: 800px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #cbe775;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #cbe775;
}
td.backColorSide {
background-color: #f9ffe7;
vertical-align:top;
}
table.backColor {
position: fixed;
top: 0px;
margin-left:auto;
margin-right:auto;
width: 100%;
height: 6000px;
z-index: -2;
border-collapse: collapse;
border: 1px transparent;
}
The HTML of the table is:
<table class="backColor">
<tr>
<td class="backColorSide">
</td>
<td class="backColorContent">
</td>
<td class="backColorSide">
</td>
</tr>
</table>
A link to the example ive been using is here: http://www.nybblemouse.com/external/test2.html
You need to re-construct your markup and apply styles in this way :
My Fiddle
Related
I have a table with multiple <a> elements within:
.TableClass td {
background-color: #050;
height: 150px;
}
.TableClass a {
background-color: #f00;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
Fiddle: https://jsfiddle.net/p937jbee/1/
Is there a way to avoid double borders?
UPDATE:
I can't change the HTML code and there are multiple <td> instead of 2 of my example.
Here is a solution for multiple cells:
You need to zero out the left border for all cells except first one
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
Have a look at snippet
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
}
.TableClass tr td:not(:first-child) a {
border-left: 0;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
https://jsfiddle.net/54o0efuv/
Just add a seperate class to one or both of the boxes where you remove the border ex. JSFIDDLE
a.one{
border-left: 0px;
}
html:
<a class="one" href="#"></a>
Seefiddle
Add CSS
.TableClass td:nth-child(2) a {
border-left:none;
}
This should work even if you have multiple elements and not just 2. https://jsfiddle.net/p937jbee/4/
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.TableClass td:first-child a {
border-right: 2px solid #000000;
}
.TableClass td:last-child a {
border-left: 2px solid #000000;
}
For a more consistant build-up I suggest to leave the right border, except for the last td. In case you'd like to add more blocks.
CSS
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass td a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
border-right: 0;
}
.TableClass td:last-of-type a {
border-right: 5px solid #000000;
}
border-collapse: collapse;
use this css
The border-collapse property is for use on elements (or elements made to behave like a table through display: table or display: inline-table).
The most straightforward method is to assign border-collapse:collapse to the table and to move the border property from the a elements to the tds. That is all you need to change.
.TableClass table {
border-collapse: collapse; /* new */
}
.TableClass td {
background-color: #005500;
height: 150px;
border: 5px solid #000000; /* moved */
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
.TableClass td
{
background-color: #005500;
height: 150px;
}
.TableClass a
{
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
}
.elem1{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}
.elem2{
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
}
<div class="TableClass">
<table cellspacing="0" cellpadding="0">
<td>
</td>
<td>
</td>
</table>
</div>
here is an updated fiddle, hopefully with be a solution for you
Quick answer:
You have to do 2 things, use the nth-of-type on a repeating element, in this case <td> and change how you write your brackets. :P - but really, you may need to say, every 2nd or third block - depending on how you do things. You may want to just use a list instead of a table - depending on the goal. :nth-of-type(2n+2) etc. Look her up. : )
HTML
<table cellspacing="0" cellpadding="0" class="table">
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSS
.table a {
background: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 4px solid #000000;
}
.table td:nth-of-type(odd) a {
border-right: 2px solid black;
}
.table td:nth-of-type(even) a {
border-left: 2px solid black;
}
https://jsfiddle.net/6bgbmde5/
or you can use the background of the tr
.table tr {
display: block;
background: black;
padding: 4px;
}
.table a {
background: red;
width: 100px;
height: 100px;
display: block;
}
.table td:not(:last-of-type) a {
margin-right: 4px;
}
There are many ways that all have side-effects and it all depends on hovers and all sorts of stuff. Good luck!
Since OP has stated that they can-not change the HTML a hacky CSS solution must be implemented. Therefor I will use negative margins which many of you frown upon but I don't see any other options available.
Use the following CSS:
.TableClass td {
background-color: #005500;
height: 150px;
}
.TableClass a {
background-color: #ff0000;
width: 100px;
height: 100px;
display: block;
border: 5px solid #000000;
margin-left:-5px;
}
.TableClass td:nth-child(1) a {
margin-left:0px;
}
For what ever reason, I get a small gap in between the two TD cells (Lines dont touch).
There is no padding or margin on that side... I did this collapsing idea.
Why is it there? http://jsfiddle.net/CKy6U/
My html:
<table>
<tr>
<td>
TEST CELL 1
</td>
<td>
TEST CELL 2
</td>
</tr>
</table>
my CSS:
table
{
width: 100%;
}
tr
{
border-bottom: 1px solid Black;
}
td
{
border-collapse: separate;
border-spacing: 0px;
border-left: 1px solid Black;
border-bottom: 1px solid Black;
padding: 3px;
width: 50%;
}
My Result:
Add Border Collapse for table.
table
{
width: 100%;
border-collapse:collapse;
}
DEMO
Add border-right: 0px; to and remove border-collapse: separate from the td. Add border-collapse: collapse to the table.
Fiddle: http://jsfiddle.net/CKy6U/7/
Try like this: LINK
CSS:
table {
width: 100%;
border-collapse:collapse;
}
use normalize.css or an css reset
Also I would add
<table cellspacing="0" cellpadding="0"> ... </table>
Remove the border-collapse on the td and add it to the table
table{
width: 100%;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid black;
}
td{
border-spacing: 0px;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 3px;
width: 50%;
}
You have to add border-collapse: collapse in your table or cellspacing="0" in your html table.
css
table {
width: 100%;
border-collapse: collapse;
}
fiddle
html:
<table cellspacing="0">
fiddle
Both solutions should work. But use border-colapse cause as #Mooseman comment cellspacing is obsolete in html5.
This question already has answers here:
How do I remove the double border on this table?
(4 answers)
Closed 8 years ago.
(EDIT: Solved. I was on the right track with the border-collapse, but I had to use ctrl+f5 to see it)
Tried using border-collapse and border-spacing to remove them, but it didn't work.
Code:
<main>
<div class="adminr1">
<section class="adminc1">
<table class="adminResults">
<thead>
<td>cell</td>
<td>cell</td>
</thead>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</section>
</div>
</main>
CSS:
*
{
margin: 0;
padding: 0;
font-size: small;
font-family: Roboto;
vertical-align: middle;
text-decoration: none;
}
main
{
font-size: 0;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 86%;
min-width: 1000px;
}
section
{
border: 1px solid #BBB;
background: #FFF;
border-radius: 7px;
display: inline-block;
overflow: hidden;
}
.adminr1
{
display: inline-block;
width: 66%;
height: 700px;
margin-right: 5px;
font-size: 0;
margin-bottom: 10px;
}
.adminc1
{
width: 100%;
height: 100%;
font-size: 0;
}
/*Table Styles:*/
.adminResults
{
width: 100%;
border: 1px solid #000;
}
.adminResults thead
{
border: 1px solid #000;
}
.adminResults tr td
{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
So far, this is the only page I have which uses a table, so I have no table-related styles anywhere else that could be blocking or overwriting the properties I'm trying to add, nor do i have any border-related files on other elements applied generally enough to do the same thing.
I'm obviously missing something, because this seems like it should be a very easy thing to do.
Use border-collapse property to remove spacing between cells
table.adminResults{
border-collapse:collapse;
}
Fiddle Demo
add the border-collapse:collapse; to table.
.adminResults{width:100%;border:1px solid #000;border-collapse: collapse;}
Here is an example:
http://jsfiddle.net/kheema/n4rsy/1/
Did your try to add border="0" cellpadding="0" cellspacing="0" inside table? Like this:
<table class="adminResults" border="0" cellpadding="0" cellspacing="0">
Set border-spacing: 0px; and border-collapsing: seperate; on the Table.
.adminResults {
width: 100%;
border: 1px solid #000;
border-spacing: 0px;;
border-collapse: seperate;
}
Check out this updated: Fiddle Demo
This question already has answers here:
Border Height on CSS
(12 answers)
Closed 9 years ago.
I have border-right on a table and I would like it to be a few pixels short from the top and bottom, preferably 80-90% height of the <td> as the table won't stay the same.
Like this:
Is this possible to do?
table{
border-right: 1px solid #f00;
}
Fiddle
This isn't possible, as you describe it, as the border of an element extends (by definition) around the full border. You can, however, fake it to some extent using nested elements or with CSS-generated content.
For example, with the following HTML:
<table>
<tbody>
<tr>
<td>text in cell</td>
</tr>
</tbody>
</table>
And the following CSS:
td {
border: 2px solid #000;
/* change the border-color to disguise the presence of the actual border
left as #000 here, to show where the fake 'border' sits in relation to
the actual border-right */
padding: 0.5em;
position: relative;
}
td::after {
content: '';
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.
For this to be used in an email client, unfortunately a nested element is required (given the hideously primitive capacities of email clients, even now). So, the following HTML:
<table>
<tbody>
<tr>
<td>text in cell<div></div></td>
</tr>
</tbody>
</table>
And CSS should work:
td {
border: 2px solid #000;
padding: 0.5em;
position: relative;
}
td div {
background-color: #f00;
position: absolute;
left: 100%;
top: 3px;
bottom: 3px;
width: 2px;
}
JS Fiddle demo.
You can do it with a pseudo-element:
table {
position: relative;
}
table:after {
position: absolute;
border-right: 1px solid #f00;
content: "";
top: 5%;
bottom: 5%;
right: -1px;
}
Example: http://jsfiddle.net/hY6Te/11/
Is additional markup acceptable?
Fiddle
<div id="wrapper">
<table width="200" height="100" bgcolor="#eee0e0">
<tr>
<td>TEXT</td>
</tr>
</table>
</div>
table{
border-right: 1px solid #f00;
}
#wrapper {
background: #eee0e0;
padding: 20px 0;
display: table; /* necessary for shirnk wrapping (inline-block would also work)
}
Here is how I style tables now:
#content table {
width: 100%;
margin-top: 1em;
border-collapse: collapse;
border: 1px solid #222;
}
#content table td {
border: 1px solid #888;
padding: .3em;
}
What I am trying to achieve is to have tables with black outside border (#222). However, I want the inside border to be lighter color (let's say #888). How can I achieve this?
Why not have a div container for the table and set it's border as required. Then simply set the table border independently?
Markup:
<div class='outerDiv'>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Css:
.outerDiv{ border:solid 2px #222; }
.outerDiv table { border:solid 2px #888; }