I have generated a HTML page with several tables.
Right now they show one after another without any space between them
my current css file is very simple
table {
font-family: arial, sans-serif;
border-collapse: collapse;
/*width: 100%;*/
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
How can I add some spacing between the tables using only css?
I tried
table{
margin-right: 10px;
float: left;
}
but it did not work out
I modified it to
margin-bottom:10px;
float:bottom;
and it seems to work.
Your code should work. Check this snippet:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
margin-right:10px;
float:left;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr><td>aaaaa</td></tr>
</table>
<table>
<tr><td>bbbb</td></tr>
</table>
<table>
<tr><td>aabbbbaaa</td></tr>
</table>
If you have width: 100%; you need to add margin-top:10px for example.
Related
So I'm building a web shop cart (using Bootstrap 4.1) and I have to make a list of items in the cart with quantity, the price and total-price... I've decided to use a table for this and ran into an following problem:
I'm trying to make a table that has to look like this:
and my best attempt gave me a table that looks like this..:
My question to you fellow internet strangers is how do I make the table borders surounding the "quantity" to look like in the first picture???
and how do I merge the last cells to get the total price (23,97 €) alighned in the middle of the table like in the first picture??
P.S. Is using a table even a corect choice or should I have used a different element like an or ?
Thanks in advance fellow spacemans :)
My Code:
HTML:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">#</th>
<td>100 % Mango</td>
<td>1 X</td>
<td>12.99 €</td>
</tr>
<tr>
<th scope="row">#</th>
<td>Vanilla</td>
<td>2 x</td>
<td>10.98 €</td>
</tr>
</tbody>
</table>
</div>
SCSS:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
th, td {
border: none;
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
}
}
}
You can achieve that using :after as described below, and using normal border-right for the forth row.
with :after
td{
position:relative; //positioning the td so that the :after would use it for absolute positioning
//for the small borders on 2nd and 3rd columns
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%); //moving the element back up by half its height to center it vertically
}
//for the big border on the 4th column
&:nth-child(4){
border-right:2px solid #000; //do that for the th aswell
}
}
Full Code:
.table {
border-right: 1px solid #000000;
background-color: transparent;
color: #000000;
text-align: center;
thead {
font-family: 'Alegreya', serif;
border: none;
th {
border: none;
&:nth-child(4){
border-right:2px solid #000;
}
}
}
tbody {
font-weight: 700;
text-transform: uppercase;
border: none;
font-size: 1.5rem;
td{
position:relative;
&:nth-child(2):after,&:nth-child(3):after{
content:'';
width:2px;
height:20px;
background:#000;
display:block;
position:absolute;
top:50%;
right:0;
transform:translateY(-50%);
}
&:nth-child(4){
border-right:2px solid #000;
}
}
th, td {
border: none;
}
}
}
Here us working one:https://jsfiddle.net/b2f03y1p/17/
Instead this code:
&:nth-child(3) {
border-right: 2px solid #000000;
border-left: 2px solid #000000;
}
Use this code:
td:nth-child(2):after,td:nth-child(3):after{
content: '';
height: 21px;
width: 2px;
background-color: black;
position: absolute;
top: 35%;
left: 90%;
}
td:nth-child(4):after{
content: '';
height: 100%;
width: 2px;
background-color: black;
position: absolute;
left: 90%;
}
Changes to my table info on my CSS sheet doesn't seem to be changing when I run run the application. The CSS is mostly pre-generated from when I created the MVC. I just want tables to have borders so I added the "border: solid 2px black" portion. However it doesn't seem to be adding the border. What am I doing wrong here? CSS:
table {
margin-top: 0.75em;
border: solid 2px black;
}
th {
font-size: 1.2em;
text-align: left;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link,
th a:visited,
th a:active,
th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a,
th.desc a {
margin-right: .75em;
}
th.asc a:after,
th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
<table>
<tr>
<th>
Project ID
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
<th>
Test4
</th>
<th>
Test5
</th>
</tr>
</table>
I run your code and table has border!
Maybe there is another css code which Violates your style, so use !important
border: solid 2px black !important;
if you want to border every cell use this code
table, th, td {
border: 1px solid black;
border-collapse: collapse;}
I found the problem, and it's pretty stupid. I needed to refresh the cache (Ctrl + F5). It resulted in the changed CSS.
I have problem with my table. This table is primary for phones. When I have phone vertical, table is not showing thread, but when I have phone horizontally, it shows correctly.
Can anybody help me to display this table correctly on phones when phone is vertically?
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
Thank you for your response.
That's a simple fix. Remove clip: rect(0 0 0 0); and width: 0px;. Those lines hides the entire thead because the #media condition kicks in in portrait mode (narrower screen).
You might want to redo the entire #media section of your css - it's overall a bit weird. Maybe add a couple of details what you originally intended to do on narrow screens.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
display: block;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
Lets just remove thead position and display rules.
Now we can see the thead. The you can add the remaining styles.
Hope this is what you were looking for. Happy to explain or help in a better solution if needed.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
/*table-layout: fixed;*/
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f9f9f9;
border: 1px solid #ddd;
padding: .35em;
}
table tr:hover {
background-color: #f5f5f5;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #333333;
color: #fff;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 60px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 0px;
}
table tr {
border-bottom: 3px solid #ddd;
/*//spodok tabulky*/
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
/*Hrubka ciary medzi riadkam*/
display: block;
font-size: .8em;
text-align: center;
/*Pozicia textu*/
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:nth-child(even) {
background-color: #f2f2f2;
}
}
<table>
<thead>
<tr>
<!--<th>Poradie</th>-->
<th>Císlo zákazky</th>
<th>Pozícia</th>
<th>Poradové císlo</th>
<th>Stav</th>
</tr>
</thead>
</table>
I've found similar tops for combining classes using the comma to separate them; however when I try it with the table class only the last table is receiving the style. Here is a small sample of what I'm trying to clean up:
table.tslist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.djrlist {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.vacation {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.djrlist td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.vacation td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
As I mentioned I tried table.tslist, table.djrlist, table.vacation {....} but no luck.
I'm guessing that you are doing something like this:
table.x, table.y td { }
and assuming that it'll expand out and apply to all the TD elements. It won't. You need something like this instead:
table.x td, table.y td { }
Be sure to include the element type in your seperators:
table.tslist,
table.djrlist,
table.vacation
{
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 225;
}
table.tslist td, <-----
table.djrlist td, <-----
table.vacation td <----- {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
I'm guessing you don't even need to do multiple styles like that. Classes are not like IDs, you can use them more than once.
If all of your tables are styled the same, just replace all of this:
<table class="tslist">...</table>
<table class="vacation">...</table>
<table class="djrlist">...</table>
with
<table class="tslist">...</table>
<table class="tslist">...</table>
<table class="tslist">...</table>
You can then remove the unused style entries from the css file.
I have tables styled as such:
table { width: 100%; border: 0; margin-bottom: 2em; }
table thead th
{
font-size: 13px;
font-weight: bold;
text-align: left;
padding: 10px;
background-color: #263849 !important;
color: #FFF;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
table td { vertical-align: top; }
table tbody tr td { background: #f4f4f4; border-bottom: 1px solid #D5D5D5;
border-top: 1px solid white; }
table th { padding: 10px 0; }
table tbody td { padding: 10px; }
table tr.even td { background: #F9F9F9; }
tr:nth-child(odd) { background-color:#F9F9F9; }
tr:nth-child(even) { background-color:#FFF; }
Now on the same page I want another table, with different style.
So that table I say call is table class="ver2"
What and how do I style this different table ? Its starting to do my head in.
You can set specific styles to the second table by targeting it with your CSS:
table.ver2 {/*whatever your declarations are...*/}
table.ver2 th {/*declarations*/}
etc...
Since you've decided to use a class, you need to use the period symbol for your CSS rules. If you chose to use the 'id' attribute, you'd replace the period with the pound sign (#).