I am trying to make a table look nice with CSS.
I have given a border radius to the heading cells. However - a thin, radius-less, border is being applied on top of my curved border. Chrome says its getting this css from the user agent stylesheet. How can I fix this?
#IPTable {
color: #333; /* Lighten up font color */
font-family: Helvetica, Arial, sans-serif; /* Nicer font */
width: 100%;
border-collapse:separate;
border-spacing: 0;
}
#IPTable th {
background: #3E3E3E;
color: #FFF; font-weight: bold;
height: 40px;
}
#IPTable td {
background: #FAFAFA;
}
#IPTable td:first-child
#IPTable tr:nth-child(even) td { background: #F1F1F1; }
#IPTable tr:nth-child(odd) td { background: #FEFEFE; }
#IPTable tr td:hover { background: #666; color: #FFF; }
#IPTable tr:first-child th:first-child {
border-radius: 20px 0 0 0;
}
#IPTable tr:first-child th:last-child {
border-radius: 0 20px 0 0;
}
Related
Table {
font-family: Arial;
background-color: #EEEEEE.
border-collapse: collapse;
width: 100%;
}
Table td, Table th {
border: 1px solid #ddd;
padding: 1px 3px;
}
Table th {
font-size: 12px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
background-color: #1C6EA4;
color: white;
}
Table tr td:nth-child(1) {
color: #ff0000;
}
But E-mail i receive never shows the color i input. i already checked that it worked when i input the code on Web-based HTML CSS try editor.
What is the problem of below CSS code?
My CSS code for table is overriding the bootstrap datepicker.It doesn't look anything like a calendar. How can i fix this?
I tried using css ":not" which unfortunately did not work.
I do not know what else to try.
I also tried to change them to classes and try which did not work as well.
Is there anyway to ignore the the css file for this element only or make bootstrap css !important?
Please check the demo with running code.
Thanks.
Codepen Demo
CSS Code of the table
/*Table*/
body{
background-color:black;
color:white;
}
table:not(.form-control) {
font-family: "Open Sans", sans-serif;
border: 1px solid salmon;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr:not(.form-control) {
background-color: #0B0C10;
border: 1px solid #0B0C10;
padding: .35em;
}
table th:not(.datepicker),
table td:not(.datepicker) {
padding: .625em;
text-align: center;
}
table th:not(.datepicker-days) {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#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: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid salmon;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid salmon;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Codepen Demo
Please take a look at this fork of your Codepen demo: https://codepen.io/kshetline/pen/mdbjyQr
You already had a class table-align that was wrapped around your table, so all that was necessary was to prefix the CSS rules which were meant to apply only to your table with .table-align. For example:
.table-align table th,
.table-align table td {
padding: .625em;
text-align: center;
}
.table-align table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
And I also deleted all of the :not(.datepicker) stuff.
I've got a grid that I am generating on a webpage, with a some styling attached to it. The header has a background image applied to it. When the header is ONE line deep, it looks fine. The second that the header spans two lines (with a line break) it looks like the attachment. I've tried fiddling with the height but I just can't get it to take.
<style>
.Grid {background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; font-family:Calibri; color: #474747;}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1; }
.Grid th {
padding : 4px 2px;
color: #000000;
background: #363670 url(images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt {
background: #fcfcfc url(images/grid-alt.png) repeat-x top; }
.Grid .pgr {background: #363670 url(images/grid-pgr.png) repeat-x top; }
.Grid .pgr table { margin: 3px 0; }
.Grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.Grid .pgr a { color: Gray; text-decoration: none; }
.Grid .pgr a:hover { color: #000; text-decoration: none; }
</style>
To the .Grid th try adding
background-size: auto 100%;
The first variable is width, which we want whatever the normal behavior is because it's already working, and the second is height and is saying use 100% of available height.
I have a table within a table and there are these phantom borders. For the life of me I have tried so many things to kill these extra spaces and I do not know how to get rid of them. Check out the jsfiddle
body{
background: #ddd;
}
.outterTbl{
border-collapse: collapse;
border-spacing: 0px;
background: green;
}
.outterTbl th{
background: black;
color: white;
}
.outterTbl td{
margin: 0px;
border-spacing: 0px;
border: none;
}
.innerTbl{
border-collapse: collapse;
border-spacing: 0px;
text-align: center;
}
.innerTbl th{
background: #3399cc;
color: white;
}
.innerTbl tr:nth-child(odd) {
background: white;
}
.innerTbl tr:nth-child(even){
background: #9ccde5;
}
adding
padding: 0px;
to the outertable td does the trick
jsfiddle
I have a table that gets loaded from a text file. The table is contained within a container div. I've styled the table, but when the table has too many columns for the width of the container div, the content overflows and is now scroll-able. This is not a problem, however, from the point where the overflow occurs, the styling for the table does not apply anymore.
Please have a look at the image:
The styling for this table is below:
table.static {
width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}
table.static thead {
background: #D0D6DA;
border-bottom: 1px solid #aaa;
}
table.static thead tr th {
border-left: none;
border-right: none;
line-height: 30px;
padding: 0 10px;
text-align: left;
color: #333;
font-weight: 400;
text-shadow: 0 1px 0 #fff;
}
table.static tbody tr td {
line-height: 25px;
padding: 0 10px;
border: 0 solid #999;
}
table.static tbody tr td {
border-bottom: 1px solid #E1E5E7;
}
table.static tbody tr:last-child td {
border-bottom: 0;
}
table.static tbody tr.even td {
background-color: #EDF1F3;
border-bottom: 1px solid #D8DCDE;
}
table.static tbody tr td input,
table.static tbody tr td button {
margin: 10px 0;
}
Can anyone please explain why this is happening, and what I can do to fix it? Thank you
Try this
table.static {
min-width: 100%;
margin-bottom: 0!important;
margin-top: 0!important;
}