tr {
margin-bottom: 100px;
}
<table>
<thead>
<tr>
<th>School Name</th>
<th>State</th>
<th>League</th>
<th>Division</th>
</tr>
</thead>
<tbody>
<tr>
<td>School1</td>
<td>State1</td>
<td>League1</td>
<td>Division1</td>
</tr>
</tbody>
</table>
I need a table like this with some basic information where I'll add a button that on click expands that row with some more details.
I couldn't find the right answer for that so I thought about changing css with some transition to the table on click where some specific row gets margin bottom from 0 to 100px maybe and then find the position of that tr and let say:
trPosition= 100px;
trHeight= 30px;
The bottom of the tr is at: 70px
And some new element appends with jquery at that position with a height of tr margin bottom.
But before all that I can't even use margin bottom between rows, why is that?
And is there some other solution for this?
Table elements do not have margin - you can use padding-bottom here. Another thing is you need to apply it to the td or th element.
See demo below:
tr > td {
padding-bottom: 100px;
}
<table>
<thead>
<tr>
<th>School Name</th>
<th>State</th>
<th>League</th>
<th>Division</th>
</tr>
</thead>
<tbody>
<tr>
<td>School1</td>
<td>State1</td>
<td>League1</td>
<td>Division1</td>
</tr>
<tr>
<td>School1</td>
<td>State1</td>
<td>League1</td>
<td>Division1</td>
</tr>
</tbody>
</table>
If you change display for block, you will see margin, but I'm not sure, if that's what you need. You should use different methods.
margin-bottom: 100px; display: block;
Related
<tr>
<td></td>
<td colspan="3">Susi Handayani Jl. Kebangsaan No.225 300.000</td>
</tr>
How to merge the two td to be inside one Td, but it's not sticking together, merged but I want the word to not stick together beside, make some space from the deleted td to be the same column as above
I tried align but it didn't Work, I've also tried dividing the tr and tried removing td for one paragraph and it still sticks with the second paragraph (td), what I'd expect is the td not to stick together but to align the text above the text that I've made
<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Peserta</th>
<th>Alamat</th>
<th>Simpanan</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>350.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Andi Suryono</td>
<td>Jl. Kemerdekaan No.17</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td colspan="3">Susi Handayani
Jl. Kebangsaan No.225
300.000</td>
</tr>
<tr>
<td>3.</td>
<td>Roy Pratama</td>
<td>Jl. Merdeka No.32</td>
<td>1.000.000</td>
</tr>
</tr>
<tr>
<td>4.</td>
<td>Tia Suryani</td>
<td>Jl. Jelajah No.111</td>
<td>1.555.000</td>
</tr>
</tbody>
</table>
I'm trying to make the table fused but not sticking together, I'm planning to give the word some space and how do I make the space for each column
You're talking about styling, yet you posted no style tag or CSS whatsoever. Post the general CSS you have, to reproduce the problem, or at least a screenshot of what the problem is.
Generally, spacing in tables comes with padding. Try something like:
<style>
td {
padding: 5px 10px;
}
</style>
This will put 5px top and bottom and 10px from both sides of every cell in the table.
I have this table
table td {
width: 200px;
text-align: center;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
<tr>
<td class="red">$ 11.1,00</td>
</tr>
<tr>
<td class="red">$ 11.122,00232</td>
</tr>
<tr>
<td class="red">$ 11.122,00</td>
</tr>
</tbody>
</table>
I need to have my numbers centered in the td itself, but I can't find a way to position the numbers one under another so the end result will look like this
So I need centered text in the td but the number is vertically aligned by the, and the . from the right
So at the end result will be in the centered td:
$ 11.122,00
$ 11.1,00
$ 11.122,00232
I don't need text-align:right on this, because onthat way they will be aligned just right, the numbers will be one under another, but the whole content in the td will be not centered - it will be just right aligned.
If I've understood correctly, you want the cell header centered, and the cells right aligned? If so, just add a style for the th like so:
table td {
width: 200px;
text-align: center;
}
table td span {
width: 50%;
border:1px solid red;
display:inline-block;
text-align:right;
}
.red {
border:1px solid red;
}
<table>
<thead>
<tr>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="red">
<span>
$ 11.122,00
</span>
</td>
</tr>
<tr>
<td class="red"><span>$ 11.1,00</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00232</span></td>
</tr>
<tr>
<td class="red"><span>$ 11.122,00</span></td>
</tr>
</tbody>
</table>
Quoting this, since I don't have the right reputation to comment...
Thank you. I thought the same thing you suggest. The problem is that the width is fixed - so what if some number is bigger than the whole width - 50% of the parent ?
Set your parent width to width:auto; and it will actually get the right width based on it's child width. So it wont be a problem if it comes a row with more characters than you want.
I have managed to get certain bits of my responsive website to work but am still having some issues in terms of moving certain tables. For some reason, I can move the table in certain directions but not for others such as top. For the following table, I would like to move it lower if possible but even when placing the word !important after top, it doesn't work. For the first picture, I can't seem to move it further to the right and for the second, I can't seem to move it further down....
Image 1
Image 2
This is the table code for the first problem
.header2_user_information {
background-color: #FAEBD7;
table-layout: fixed;
width: 110%;
position: relative;
right: 20em;
}
<table class="header2_user_information">
<tr>
<th colspan="2">User\'s General Information</th>
</tr>
<tr>
<th>First Name:</th><td>Mervin</td>
</tr>
<tr>
<th>Last Name</th><td>Lee</td>
</tr>
<tr>
<th>Email Address:</th><td>piano0011#gmail.com</td>
</tr>
<tr>
<th>User ID:</th><td>piano0011</td>
</tr>
<tr>
<th>Administrator Status:</th><td>None</td>
</tr>
<tr>
<th>Moderator Status:</th><td>None</td>
</tr>
<tr>
<th>Premium Membership Status:</th><td>Member</td>
</tr>
</table>
The second is very similar to the first...
There is an explanation on when CSS offset properties can be used. According to FreeCodeCamp:
When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned.
You have position: relative in your code snippet but according to your question you probably forgot it in your actual code. Or you have overridden it somewhere else. (Use your browser's "inspect element" to check it.)
.header2_user_information {
background-color: #FAEBD7;
position: relative; /* Note this line. It is necessary to use CSS offsets */
top: 30px;
left: 2em; /* px, em, percentage or any other value is acceptable */
}
<table class="header2_user_information">
<tr>
<th colspan="2">User\'s General Information</th>
</tr>
<tr>
<th>First Name:</th><td>Mervin</td>
</tr>
<tr>
<th>Last Name</th><td>Lee</td>
</tr>
<tr>
<th>Email Address:</th><td>piano0011#gmail.com</td>
</tr>
<tr>
<th>User ID:</th><td>piano0011</td>
</tr>
<tr>
<th>Administrator Status:</th><td>None</td>
</tr>
<tr>
<th>Moderator Status:</th><td>None</td>
</tr>
<tr>
<th>Premium Membership Status:</th><td>Member</td>
</tr>
</table>
I am trying to create a table that has 1 row and 8 columns. However, I want a blank spaces after the 3rd and 6th table cell. The result should be:
cell cell cell blank space cell cell cell blank space cell cell
I have tried placing margins but they don't work. I have tried implementing this code, but it doesn't work.
.brzl td:nth-child(3){
margin-right: 20px;
}
Edit:
I am trying to implement this within an AngularJS project. In the index.html i have the following code:
<div ng-switch-when="brzl">
<table class="brzl">
<tbody>
<tr>
<td ng-repeat="cell in mini.vrednost track by $index">
{{ cell }}
</td>
</tr>
</tbody>
</table>
<label class="small-label"> {{ mini.label }} </label>
</div>
The mini.vrednost basically loops through some JSON data (e.g. "123456789").
Each digit has to be placed within separate cell in the table. Now, once the '1','2', and '3' have been placed in the cells, I need to put an empty field after them and then continue with '4', '5' etc. The empty field cannot be read from the JSON data, since the whole string is already read from somewhere (I suppose the database).
I know I should have mentioned this earlier. That was my bad.
Margin doesn't work on table cells. However, padding does. Of course, if you have added borders to your table, this means you get one cell with a lot of white space.
Fiddle
What you could do (through hard coding or by injecting with Javascript or jQuery) is add a blank cell where you want the white space, remove any styling of that cell through CSS and add a width.
Working fiddle
HTML
<table>
<tbody>
<tr>
<td>cell</td>
<td>cell2</td>
<td>cell3</td>
<td></td> <!-- blank cell, no border -->
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
<td></td> <!-- blank cell, no border -->
<td>cell7</td>
</tr>
</tbody>
</table>
CSS
td {
border: 1px solid #ccc;
}
td:nth-child(4n+4){
border: none;
width: 30px; /*desired blank space*/
}
As you can see, you'll have to target every 4th cell, starting with the 4th. If you have any questions, just ask and I'll see if I can adapt the answer accordingly.
UPDATE AFTER OP'S EDIT
However, since your table is filled with data by some script, you might want to run the following jQuery AFTER the loop is done filling up the table. I have no idea how it will react on huge tables with lots of content, but it works in the updated Fiddle below.
$('tr > td:nth-child(3n+3)').after('<td></td>');
This piece of jQuery takes every 3rd child, starting with the 3rd, and adds an empty <td> to it, which is then styled by the CSS. Of course you could ad a <td> with a specific class which you then target with CSS, but as it is now, it seems to work fine.
Fiddle
Remember to add jQuery!
As i told you, you can't use margin but you can try like this method -
table {
width: 100%;
}
td{
background: #ccc;
padding: 10px;
text-align: center;
}
td:nth-child(3n){
background: #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Or you can try this to set border on right side on nth-child
table {
border-collapse: collapse;
}
td{
background: #ccc;
padding: 10px;
}
td:nth-child(3n){
border-right:10px solid #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Try like this: Demo
td {
border: 1px solid #ccc;
padding:10px;
}
td:nth-child(4n) {
border-color: #fff;
}
HTML:
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td> <!-- 3,6,... cols should be empty to get blank space -->
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
<td>test</td>
</tr>
</table>
I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
Blue
</tr>
<tr>
White
</tr>
</table>
The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
Does THBODY have anything to do with it?
Thanks,
CSS Code
table { border-collapse:collapse; text-align:center; }
table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }
th { color: #fff;
background-color: #5c87b2; text-align:center; }
tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }
Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.
You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.
where, the CSS is
body {
background-color: black;
color: red;
}
table tr:nth-child(odd) {
background-color: blue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
The only problem you have is missing the tag in the table.
It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
here is the fiddle: http://jsfiddle.net/rBwBm/
I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.
The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue
<tr>
<th>Name</th>
</tr>
This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White
In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:
<thead>
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<!-- Table Content in Here -->
</tbody>
And I then changed the style sheet to be:
tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}
So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:
Does THead have anything to do with it?
Yes, it has EVERYTHING to do with it.