I am using a table and here's a HTML snippet for the same:
th {
text-align: left;
}
td {
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
margin-right: 20px;
border-top-left-radius: 10px;
}
<table>
<th>
<td>Exams</td>
<td>Science</td>
<td>Mathematics</td>
<td>Biology</td>
</th>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
What I want is to increase the distance between two column elements. I have added margin-right, but it doesn't reflect in the output. Can someone help?
You can use border-spacing in the rule for the table element to create space between the rows and columns, and padding on the cells to create additional space inside the cells (including the background).
Note: Your HTML is invalid: th elements are special ("header") cells inside a row (tr) - see changed code below.
table {
border-spacing: 10px 5px;
}
th {
text-align: left;
}
td,
th {
padding: 0 5px;
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
border-top-left-radius: 10px;
}
<table>
<tr>
<th>Exams</th>
<th>Science</th>
<th>Mathematics</th>
<th>Biology</th>
</tr>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
You can use border-spacing. Unless by "gap" you just mean padding.
You can also use padding which can give the same effect that you want:
padding-right: 20px
Related
I am working on my website and I have most of the design worked out, shown in the first image. I am trying to make the header row have no space (more accurately, make it look that way by having the image span across the entire row with no spaces.), but still have the elements themselves have space in between them.
Image showing a joined header, but separate body elements:
I am aware of the border-spacing css style, but it has to be applied to the table element, which means it will apply to headers and body elements. This with with a border-spacing set
Image showing what happens to the images when the border-spacing is set on the table:
I did attempt to find an answer before posting and usually I find the answer fairly quickly, but this one seems to be a rare request. I prefer to avoid hacks if possible, but I will use them if its the only way. Also, if possible, I'd like it to be cross-browser capable. (changes to the solution are ok of course, just something that I can make work will all of them.)
I guess code is helpful to show. Here is the html:
<table id="users">
<caption>Point Totals</caption>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xogue</td>
<td>64433</td>
</tr>
<tr>
<td>Jesse</td>
<td>104040</td>
</tr>
<tr>
<td>Nanokarp</td>
<td>280</td>
</tr>
<tr>
<td>Brandon</td>
<td>70</td>
</tr>
</tbody>
</body>
and the css:
#users {
border-spacing: 6px;
width: 444px;
float: left;
margin: 20px 90px;
}
#users caption {
background-image: url("_images/points_label.png");
background-size: 200px 35px;
background-position: center center;
background-repeat: no-repeat;
height: 31px;
font-size: 20px;
padding-top: 8px;
}
#users thead {
background-image: url("_images/point_tr_head_back.png");
background-repeat: no-repeat;
}
#users th {
text-align: left;
padding: 9px 30px;
font-size: 20px;
}
#users td {
border: 2px solid #226fdb;
border-radius: 25px;
font-size: 20px;
padding: 18px 5px 2px 25px;
line-height: 15px;
background: #FFFFFFEE;
}
Note: Some of the styles used are likely unnecessary. I've been toying with it for a while and haven't cleaned it up yet.
SOLVED: further down if you would like to see the example. but put simply, wrap the content in a different element (like a span) and move all styles to the new element.
I think you could get there fairly easily with some margins and padding if you can wrap the cell contents in a span (or whatever).
table {
text-align: left;
border-spacing: 0;
}
thead tr {
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
border-radius: 24px;
}
th {
padding: 6px 1em;
}
th:first-child {
border-radius: 24px 0 0 24px;
}
th:last-child {
border-radius: 0 24px 24px 0;
}
tbody td > span {
display: block;
border: 2px solid blue;
background: aliceblue;
border-radius: 24px;
margin: 6px 6px 0 0;
padding: 0.25em 1em;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td><span>Xogue</span></td>
<td><span>262677</span></td>
</tr>
<tr>
<td><span>Jesse</span></td>
<td><span>17632</span></td>
</tr>
<tr>
<td><span>Nanokarp</span></td>
<td><span>12344</span></td>
</tr>
</tbody>
</table>
One option is to add padding to your CSS for td only and keep rest of the attributes same among td and th as below, also if you can share the used code snippet someone can help better:
td {
padding: 5px;
}
I am trying to display some text in the bottom left of my table but having some issues getting that. What can I try to get that to display?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
.heading2_b10 {
font-family: calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10">Text</td>
</tr>
<tr>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
I think the simplest thing to do would be just to add style="text-align:left;" to the html tag's attribute
Can colspan attribute help you in this case?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
heading2_b09 {
font-family:calibri;
font-weight: bold;
font-size: 8;
text-align: center;
}
.heading2_b10 {
font-family:calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10" colspan="2">Text</td>
</tr>
<tr>
<td class="heading2_b09">LOG-ID: ###</td>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
Explanation: colspan attribute can be applied on a <td> element, it allows you to set how columns wide the element should be.
What is changed?
The first row has colspan="2", that means his width will be extended to 2 columns, like the one under. But this one has really two columns to show where the LOG-ID: ### string is the first, aligned on the left and LADIES STOCKINGS SYN-BLACK one is the second
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
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;
}