Given a simple table that is a child of an article.
The table has a 100% width so it fits its article parent.
I want the table to expand a little out, side ways both left and right, in a symmetrical way.
In my code the table does expand nicely on the left side, however it does not react to anything I set in CSS on the right side.
(Notice that the left text is nicely aligned with the text that is outside of the table, despite the table having margins set.)
The left side works perfectly, but the right side does not.
What I want to achieve is for the right side of the table to expand in the same way outward and towards the right, a few pixels.
What have I overlooked here? Thanks!
body,
html {
background: #EEE;
margin: 60px;
width: auto
}
article {
background: #DDD;
width: auto
}
table {
border-collapse: collapse;
width: 100%;
border-spacing: 0;
margin: 0 -10px 0 -10px;
/* Expand the Table on both left and right side */
}
th,
td {
padding: .5em 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-color: black;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
table td {}
table th {
font-weight: bold;
}
.today {
background-color: #FFD700
}
tr:hover {
background-color: #FFD700
}
<html>
<body>
<article>
Start<br> Start
<br> Start
<br>
<br>
<table>
<tbody id="weekdagtabel">
<tr id="day-1">
<td>Maandag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-2">
<td>Dinsdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-3">
<td>Woensdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-4">
<td>Donderdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-5">
<td>Vrijdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-6">
<td>Zaterdag</td>
<td>Gesloten.</td>
</tr>
<tr id="day-0">
<td>Zondag</td>
<td>Gesloten.</td>
</tr>
</tbody>
</table>
<br> End
<br> End
<br> End
<br>
</article>
</body>
</html>
You don't actually want the table to be 100% width. You want 100% plus whatever negative margins you add to the parent.
body,
html {
background: #EEE;
margin: 60px;
width: auto
}
article {
background: #DDD;
width: auto
}
table {
border-collapse: collapse;
width: calc(100% + 10px + 10px); /* Add the negative margins from below */
border-spacing: 0;
margin: 0 -10px 0 -10px; /* Expand the Table on both left and right side */
}
th,
td {
padding: .5em 5px;
text-align: left;
border-bottom: 1px solid #ddd;
border-color: black;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
table td {}
table th {
font-weight: bold;
}
.today {
background-color: #FFD700
}
tr:hover {
background-color: #FFD700
}
<html>
<body>
<article>
Start<br> Start
<br> Start
<br>
<br>
<table>
<tbody id="weekdagtabel">
<tr id="day-1">
<td>Maandag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-2">
<td>Dinsdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-3">
<td>Woensdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-4">
<td>Donderdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-5">
<td>Vrijdag</td>
<td>08:00 tot 20:00</td>
</tr>
<tr id="day-6">
<td>Zaterdag</td>
<td>Gesloten.</td>
</tr>
<tr id="day-0">
<td>Zondag</td>
<td>Gesloten.</td>
</tr>
</tbody>
</table>
<br> End
<br> End
<br> End
<br>
</article>
</body>
</html>
Related
I was wondering if it was possible, with html and/or CSS, to collapse only tr with he table's outline, while having different border styles for the table's outline and trs, and the tds and ths.
I know this is complicated, so if this can make it clearer, here's a drawing of what I'm trying to achieve:
No, border-collapse applies only to the whole table, and it is not a valid property for tr or td elements so you cannot apply it to those to get a different spacing.
However you can “fake” it by adding the cell content into a div and using it for some of the styling:
Apply the outer table styling to the table as normal
Apply the row styling to the top and bottom borders of the th / td cells
Apply the "cell" styling to the divs inside the th & tds.
Working Example:
table {
border: 6px solid lightgray;
border-right-color: gray;
border-bottom-color: gray;
border-collapse: collapse;
}
td {
border-top: 5px solid gray;
}
tr:not(:last-child) td{
border-bottom: 5px solid gray;
}
th .cell,
td .cell {
margin: 5px;
padding: 5px;
border: 2px ridge lightblue;
}
<table>
<tr>
<th><div class="cell">First Name</div></th>
<th><div class="cell">Last Name</div></th>
</tr>
<tr>
<td><div class="cell">John</div></td>
<td><div class="cell">Smith</div></td>
</tr>
<tr>
<td><div class="cell">Jane</div></td>
<td><div class="cell">Doe</div></td>
</tr>
</table>
Found a way by just adding an hr and a minuscule tr between both trs.
hr {
border: 4px outset rgb(207, 172, 179);
width: 443px;
position: absolute;
top: 388px;
left: 35px;
}
tr#mini {
border: none;
padding: 0px;
margin: 0px;margin-top: 0px;
margin-bottom: 0px;
height: 8px;
}
HTML:
<table id="tableau" class="nomaltext">
<tr>
<th>
25g
</th>
<th>
50g
</th>
<th>
75g
</th>
<th>
100g
</th>
<th>
Personnalisé (min. 120g)
</th>
</tr>
<tr id="mini">
<hr>
</tr>
<tr>
<td>
5,99$
</td>
<td>
8,99$
</td>
<td>
13,80$
</td>
<td>
7,40$
</td>
<td>
11¢/gramme
</td>
</tr>
</table>
I'm building a table in which I want a given row to be highlighted on hover. However, I want the hover space be shorter than the row's height.
Picture for preview. This is printscreen of a Sketch file. You can see that the white border is in a certain distance from the hovered space. Is it even possible to create something like this?
So far, I tried to make the border-spacing larger but then I get the space between the columns too, which is not the desired outcome.
Try something like this :
tr{
background: grey;
padding: 10px;
}
.hover {
padding : 5px;
margin : 5px;
cursor: pointer;
border-radius: 10px;
}
.hover:hover {
background : lightblue;
color: darkblue;
}
<table>
<tbody>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
<tr>
<td>
<div class="hover">Hover me</div>
</td>
</tr>
</tbody>
</table>
You could try using: border-collapse:separate; with border-spacing
table {
width: 100%;
border-collapse:separate;
border-spacing: 0 3px;
}
table {
width: 100%;
border-collapse:separate;
border-spacing: 0 3px;
}
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:hover {
background: red;
border-radius: 5px;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Table rows cant have have margin or padding values nor can they use border-radius or other properties that transform them.
How can I add a white space around the background color of a table cell in CSS? I have this, but the background color goes all the way to the edge. Padding seems to work for the content, but not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
EDIT: Here's my full CSS that matters to these pieces. I've made a couple updates, but am still having the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
It's being applied to a table in this partial view:
<table id="main-monitor">
<thead>
<tr>
<th>
#Html.DisplayNameFor(m => m.Name)
</th>
<th>
#Html.DisplayNameFor(m => m.A)
</th>
<th>
#Html.DisplayNameFor(m => m.B)
</th>
<th>
#Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Name</td>
<td style="background-color:#item.AColor"><span>#item.A</span></td>
<td style="background-color:#item.BColor"><span>#item.B</span></td>
<td style="background-color:#item.CColor">#item.C</td>
</tr>
}
</tbody>
</table>
Solution 1
As mentioned by "Advait S", You can use the border-spacing css rule for table tags
Here is a practical example
td {
background: red;
}
table {
border-spacing: 10px;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
Solution 2
Despite solution 1 is elegant. you can change the display property to your table cell to inline-block and then apply a margin to your cells
snippet below
td{
background:red;
margin:10px;
display:inline-block;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
You can also try this.
Write the text of table in span and apply style as.
HTML
<table>
<tr>
<td><span>Hello</span></td>
</tr>
</table>
CSS
td{
border: 1px Solid Black;
background-color: white;
}
td span{
background-color: blue;
margin: 5px;
}
See this
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 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;
}