Alright, so I have two tables set up, one outside the other. In order to make it display properly, I had to put the inner table within tags. Problem is, I want the inner table to completely overlap the outer table's borders on the top, left, and right. Here, look at this JSFiddle:
http://jsfiddle.net/26Fnm/15/
html:
<body>
<table class="main-body round">
<tr><td class="nopad">
<table class="header round">
<tr>
<td class="header">Test Text 1</td>
</tr>
<tr>
<td class="header2">This is a longer test text two.</td>
</tr>
</table>
</td></tr>
<tr>
<td>Line 1</td>
</tr>
<tr>
<td>Line 2</td>
</tr>
<tr>
<td>Line 3</td>
</tr>
<tr>
<td>Line 4</td>
</tr>
</table>
</body>
CSS:
body table.round
{
border:2px solid;
border-radius:25px;
}
.main-body td.header
{
text-align:left;
padding-left:50px;
color:white;
font-size:50px;
}
.main-body td.header2
{
text-align:right;
padding-right:30px;
color:white;
font-size:30px;
}
.nopad
{
border-spacing: 0px;
padding: 0px;
}
table.header
{
background-color:#151515;
width:100%;
}
.main-body
{
border-spacing: 0px;
border-collapse: separate;
color: #202020;
margin-left: auto;
margin-right: auto;
width: 600px;
background-color: #d2ffdc;
box-shadow: 10px 10px 10px #101010;
}
#navi
{
}
You can see, in the upper left and right corners, a bit of the green coming out between the two tables' borders. Not only do I want that to be gone, I want those two borders, on the top, left, and right, to essentially be one border, they are so overlapped. Like if I were to copy paste those two tables on top of each other, and they were exactly the same width. I've tried border-spacing, I've tried no padding, no margin, changing the size of the borders. Nothing has brought me close to where I want to be.
Is this even possible? Or do I have to settle for the appearance of overlapping with the inner table not having a border?
On a side note, why the heck does a JSFiddle link need code accompanying it? The code is there on the JSF page!
Something like this?
Fiddle
table, tr, td{
border-collapse: collapse;
}
table.header2
{
background-color:#151515;
width:100%;
border-radius:20px;
padding: 0;
margin: 0;
}
.nopad {
border-spacing: 0;
display: table-cell;
padding: 2px;
}
Related
I am trying to add cell spacing to a html table.
I want to add spacing between cells without the outer spacing.
My problem is, that the cellspacing html attribute and border-spacing CSS property adds spacing outside too.
I would like to put cell spacing without the red (outer) part - only the yellow one.
Is it possible?
Edit:
The image was drawn by hand (MS-Paint) only for illustration.
The coloring is for debugging - so that one can see where the borders, and spacing is.
I have found a roundabout solution including some additional div-s:
.inner-spacing {
border-collapse: collapse;
background-color: yellow;
border: 2px solid black;
}
.inner-spacing td {
padding: 0;
}
.inner-spacing td > div {
width: 60px;
height: 60px;
background-color: green;
border: 2px solid black;
margin: 10px;
}
.inner-spacing tr:first-child > td > div {
margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
margin-right: 0px;
}
<table class="inner-spacing">
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
<tr>
<td>
<div/>
</td>
<td>
<div/>
</td>
</tr>
</table>
So to summarize, I would like the table to have border spacing with the table border collapsing onto the cells (no spacing).
I wonder if there are some other solutions - so any new solution is welcome!
This will be tricky a little bit...you will need to set display:block and border-spacing:10px for spacing between cells and same negative margin:-10px to remove the outer spacing
Stack Snippet
table {
font: bold 13px Verdana;
background: black;
margin: 30px auto;
border-spacing: 0;
}
table td {
padding: 30px;
background: red;
color: #fff;
}
table tbody {
margin: -10px;
display: block;
border-spacing: 10px;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
This is kinda tricky, you need to follow something like this:
table, td {border: 1px solid #999; border-collapse: collapse;}
table {margin: -5px;}
table td {width: 32px; height: 32px; margin: 5px;}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.
HTML:
<table>
<tr>
<td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
</tr>
<tr>
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
border: none;
margin: 0;
padding: 0;
line-height: 0;
display: block;
font-size: 0;
img {
vertical-align: top;
border: none;
margin: 0;
padding: 0;
font-size:0;
display: block;
}
You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.
You want the images to scale to fit the width of the table cells.
you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.
Note: I built a flexible/responsive layout, which I think might be what you need.
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: 1px solid blue;
}
td {
border: none;
padding: 0;
width: 33%;
}
img {
display: block;
width: 100%;
}
tr.labels td {
background-color: beige; /* for demo only */
text-align: center;
padding: 20px 0;
}
tr.images td {
padding: 5px; /* for demo if so needed */
}
<table>
<tr class="images">
<td>
<img border="0" alt="java" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="python" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="htmlcss" src="http://placehold.it/568x296">
</td>
</tr>
<tr class="labels">
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.
I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I have this:
And I want to get to something like this:
Here is my html:
<table>
<tbody>
<tr>
<td><div class="box">P</div></td>
<td>My First Game</td>
<td>100 / 250 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</td>
</tr>
<tr>
<td><div class="box">P</div></td>
<td>The best game ever if it was done.</td>
<td>0 / 250 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</td>
</tr>
<tr>
<td><div class="box">P</div></td>
<td>Could be better but ya.</td>
<td>0 / 50 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</td>
</tr>
</tbody>
</table>
Here is my css (scss):
table {
border: none;
height: 33px;
padding: 0;
margin: 0;
}
.box {
width: 33px;
height: 33px;
background-color: #5AD427;
text-align: center;
margin: 0;
padding: 0;
}
A fiddle is here: http://jsfiddle.net/MattCamp/dzDm3/
My main concern is how to fix the boxes on the right side of each row. I can't seem to figure out how to format them so they don't have so much space around them and also to make the letter in the middle centered.
demo
<tr>
<td>P</td>
<td>My First Game</td>
<td>100 / 250 plays</td>
<td>Players</td>
<td>Duplicate</td>
<td>Archive</td>
</tr>
table {
width:100%; /**/
padding: 0;
margin: 0;
text-align:right; /**/
border-collapse:separate;
border-spacing: 0 2px;
}
table tr {background:#fff;}
table tr:hover {background:#eff;}
table tr td {padding:5px 8px;}
table tr td:first-child {border-left: 3px solid #fff;}
table tr td:last-child {border-right:3px solid #fff;}
table tr:hover td:first-child {border-left: 3px solid #4EB2E2;}
table tr:hover td:last-child {border-right:3px solid #4EB2E2;}
table tr td:nth-child(1){
color:#fff;
width: 33px;
background-color: #5AD427;
padding: 5px 0;
text-align: center;
}
table tr td:nth-child(2){
text-align:left;
}
Why not remove the div
<table>
<tbody>
<tr>
<td class="box">P</td>
<td>My First Game</td>
and then add vertical-align: middle to the .box css
According to http://css-tricks.com/using-divs-inside-tables/ absolute positioning should work but I'm not sure if I read your question right. Check this site out, it gives a good tutorial and explanation on divs inside tables.
Put the box class on the td cell itself instead of on a div inside the td (remove the div entirely). You're probably fighting cell padding, which is why you have so much whitespace around the box.
Look in to line-height and vertical-align CSS properties for the character positioning inside the box.
See fiddle for example: http://jsfiddle.net/dzDm3/2/
<td class='box'>P</td>
.box {
width: 26px;
height: 26px;
background-color: #5AD427;
text-align: center;
margin: 0;
padding: 0;
line-height: 26px;
}
I am trying to position a span element relative to the upper-right corner of a table object.
This table may be wider or move around based on what the user does on the tool, so I was looking for something simpler than the jQuery.position method. I was hoping to do something elegant with CSS.
I've built a small example of my dilemma in jsfiddle: http://jsfiddle.net/xerf/ZSGfc/
<div>
<table>
<thead>
<tr>
<th colspan="3">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
</tbody>
</table>
<span>×</span>
</div>
Below are the CSS Styles
body
{
font-family:sans-serif;
}
table
{
border-collapse: collapse;
border: 1px solid black;
margin: 20px;
}
th
{
padding: 6px;
}
td
{
padding: 3px;
border: 1px solid black;
}
UPDATE: Added some images to show required positions:
Needs to be where the red Square appears above
I wrapped your span in a div and placed it in the <th> with your title:
<th colspan="3"><div id="container">Title
<span>×</span></div></th>
css:
#container{
width:auto;
height:auto;
position:relative;
}
span{
position:absolute;
right:0px;
top:0px;
Here is a demo: http://jsfiddle.net/ZSGfc/6/
A very simple way would be to simply add another row to the very top of the table, removing its left, top and right borders. Then move your span so that it is contained by this new row and align the text to the right.
I would recommend using the div or adding another div that will control the width of the table, and then have the table inherit the width of that div. From there make the div's position property set to relative. Then you can absolutely position the span on the div.
Something similar to this fiddle. With some tweaking.
Try this:
div{
position:relative;
width: XXXpx;
}
table{
width: XXXpx;
}
span{
position: absolute;
top: 0px;
right: 0px;
}
an additional table cell on top with colspan="3" and text-align:right would work.