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.
Related
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.
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%;
}
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>
In main.html, I have this
<style type="text/css">
#hor-my-bundles
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-my-bundles th
{
font-size: 14px;
font-weight: bold;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-my-bundles td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 6px 8px;
}
#hor-my-bundles tbody tr:hover td
{
color: #009;
}
</style>
<table id="hor-my-bundles">
<thead>
<tr>
<th scope="col"> Name </th>
...and a few more.....
</tr>
</thead>
<tbody>
<tr>
...body stuff
</tr>
</tbody>
</table>
I have a global css enabled, which has the following:
table{}
th{ background-color: #BBB; padding-left: 10px; padding-right: 10px;}
td, th{ }
td{}
tr:hover{ background-color: #dfd; }
But I thought since I've specified my table with a different cs id, <td> and etc should follow those as well. Instead, my <th> in this case is following the global style.
Why? Thanks.
You have not specified a background-color for your #hor-my-bundles th, #hor-my-bundles tbody tr:hover td styles. That's all I can see that would affect the style.
It correctly takes the styles in this example http://jsfiddle.net/sN8ed/2/
UL element margins same but Firefox and IE showing different.
FULL CODE:
<html>
<head>
<style>
body
{
background-color: Red;
}
ul
{
font-family: Verdana;
font-size: 8pt;
}
ul a
{
text-decoration: none;
color: Black;
}
ul a:hover
{
text-decoration: underline;
}
table
{
background-color: Transparent;
border-collapse: collapse;
}
table tr td
{
vertical-align: top;
text-align: left;
font: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#tblYayinAkisi
{
border: 1px white solid;
background-color: #222222;
font-family: Verdana;
color: #ffffff;
vertical-align: middle;
font-size: 10pt;
width: 100%;
}
#tblYayinAkisi th
{
background-color: Transparent;
background-image: url(../images/bckSiyahGriTram.png);
background-repeat: repeat-x;
height: 20px;
padding-left: 10px;
}
#tblYayinAkisi td
{
background-color: #222222;
}
#tblYayinAkisi td ul
{
border: 1px white solid;
width: 100%;
margin-left: 10px;
}
#tblYayinAkisi td ul li
{
clear: both;
padding-top: 7px;
list-style: none;
}
#tblYayinAkisi td ul li b
{
margin-right: 10px;
float: left;
}
#tblYayinAkisi td ul li a
{
color: #ffffff;
float: left;
}
</style>
</head>
<body>
<table id="tblYayinAkisi">
<tbody>
<tr>
<th>
YABAN'da bugün
</th>
</tr>
<tr>
<td>
<ul>
<li><b>00:00</b><a target="_blank" href="programlar.aspx?id=24">TROFE ODASI</a></li>
<li><b>01:00</b><a target="_blank" href="programlar.aspx?id=17">YERLİ YABAN</a></li>
<li><b>01:30</b><a target="_blank" href="programlar.aspx?id=16">HEDEF</a></li>
<li><b>02:00</b><a target="_blank" href="programlar.aspx?id=28">İZCİ</a></li>
<li><b>02:30</b><a target="_blank" href="programlar.aspx?id=4">KUŞLAR</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<div style="text-align: center;">
<img src="images/canliYayin.png" />
<img src="images/tumAkis.png" />
</div>
<br />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Add this to your first ul declaration:
ul { padding: 0; margin: 0; list-style: none }
You will need to adjust your other ul declaration (i.e. margin-left: 10px) to suit your needs, but this rule will zero it out the differences.
The reason is that each browser uses a different combination of padding and margin to indent the ul. By zeroing out both, and setting only one (i.e. padding or margin) you can keep the display consistent.
Additionally, you need to use a valid DOCTYPE in your code so modern browsers don't revert to Quirks mode. Something like this goes at the very top of your HTML file with NOTHING in front of it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You need to set the padding on the ul as well. E.g.
ul {
padding: 0;
}