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/
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%;
}
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 a table like this and I am adding the border-bottom. There is space between the columns. I cannot figure where I did wrong. What should I do here?
#T_e5208500_98ac_11e7_a588_1866da2de39f table {
border-collapse: collapse;
table-layout: fixed;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f th,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
width: 67px;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f th {
text-align: left;
border-bottom: 1px solid black;
}
#T_e5208500_98ac_11e7_a588_1866da2de39f td {
text-align: right;
}
You can try including below lines in your CSS code
table{
border-spacing : 0;
}
Sample Example
try this snippet:
#T_e5208500_98ac_11e7_a588_1866da2de39f table,th,td{
border-collapse: collapse;
}
It was missing some HTML but here is a simple solution
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tr>
<td>Hello Header</td>
<td>Hello Header</td>
</tr>
</table>
and the css
table {
border-collapse: collapse;
table-layout: fixed;
}
th,td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
padding-right: 5px;
}
thead{
border-bottom: 1px solid black;
}
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.