I'm trying to get a simple DataTable grid to render, but I'm getting an odd behavior. The column headers all look crammed over the 1st column.
I know it is because of some styling being applied to the class workspace-table because when I delete all styles related to that class the problem goes away. (I inhierited the styles, and am not very css literate).
Could someone tell me which style is breaking this? I have tried removing individual classes or styles but I'm not seeing what the issue is.
fiddle!
styles:
.workspace-table{
width: 80%;
margin-left: 20px;
border: 2px solid #C0C0C0;
width: 80%;
font-size: 11px;
}
.workspace-table .column-resize-icon{
float: right;
color: gray;
margin-right: -4px;
}
.workspace-table .table-desc-width{
width: 288px !important;
}
.workspace-table .table-dollar-format{
float: right;
padding-right: 10px;
}
.workspace-table thead/*.headerText*/{
color: white;
display: inline;
float: left;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
.workspace-table tr {
border: 2px solid #C0C0C0;
}
.workspace-table th {
border-right: 2px solid;
background: #969696;
}
.workspace-table th .fa-sort{
color: grey;
}
.workspace-table th .fa-sort-up{
color: white;
}
.workspace-table th .fa-sort-down{
color: white;
}
.workspace-table .border-right .fa{
display: table-cell !important;
}
.workspace-table .border-right{
border-right: 2px solid white;
}
.workspace-table > thead > tr > th, .workspace-table > tbody > tr > th,
.workspace-table > tfoot > tr > th, .workspace-table > thead > tr > td,
.workspace-table > tbody > tr > td, .workspace-table > tfoot > tr > td {
padding: 5px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.workspace-table .negative {
color: red;
}
Thanks in advance!
I removed display:inliine and float:left from .workspace-table thead.
It looks like someone commented out part of that CSS selector, which maybe wasn't intended for the thead element itself, but maybe one of it's children?
http://jsfiddle.net/S9QXY/
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
float kills any display.
Do not float your table elements and it will render fine.
jsfiddle.net/EX8LZ/18/
as said , do not either modify display values, unless you have good reason :)
Take out the display: inline and the float:left from your thead rule:
.workspace-table thead/*.headerText*/{
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 0;
padding-right: 5px;
text-align: left !important;
text-decoration: underline;
}
Related
Disclaimer - I know very little about CSS.
I'm interesting in using jemdoc's CSS (https://jemdoc.jaboc.net/jemdoc.css) with HTML5 exported from emacs org-mode. However I believe emacs org-mode exports a "table-of-contents" rather than a "menu" (which is generated from a separate file with jemdoc), but I would like it if the table of contents could be displayed in the sidebar like the menu. Can this be modified to accept a table of contents? I believe this is the relevant part of the jemdoc CSS.
table#tlayout {
border: none;
border-collapse: separate;
background: white;
}
body {
background: white;
font-family: Georgia, serif;
padding-bottom: 8px;
margin: 0;
}
#layout-menu {
background: #f6f6f6;
border: 1px solid #dddddd;
padding-top: 0.5em;
padding-left: 8px;
padding-right: 8px;
font-size: 1.0em;
width: auto;
white-space: nowrap;
text-align: left;
vertical-align: top;
}
#layout-menu td {
background: #f4f4f4;
vertical-align: top;
}
#layout-content {
padding-top: 0.0em;
padding-left: 1.0em;
padding-right: 1.0em;
border: none;
background: white;
text-align: left;
vertical-align: top;
}
#layout-menu a {
line-height: 1.5em;
margin-left: 0.5em;
}
tt {
background: #ffffdd;
}
pre, tt {
font-size: 90%;
font-family: monaco, monospace;
}
a, a > tt {
color: #224b8d;
text-decoration: none;
}
a:hover {
border-bottom: 1px gray dotted;
}
#layout-menu a.current:link, #layout-menu a.current:visited {
color: #022b6d;
border-bottom: 1px gray solid;
}
#layout-menu a:link, #layout-menu a:visited, #layout-menu a:hover {
color: #527bbd;
text-decoration: none;
}
#layout-menu a:hover {
text-decoration: none;
}
div.menu-category {
border-bottom: 1px solid gray;
margin-top: 0.8em;
padding-top: 0.2em;
padding-bottom: 0.1em;
font-weight: bold;
}
div.menu-item {
padding-left: 16px;
text-indent: -16px;
}
Currently I use something like this to display my org-mode at the top of the HTML5 page (which I also copied from another CSS file).
#table-of-contents {
display: table;
width: 350px;
border: 1px solid #aaa;
margin-top: 3ex;
padding: 10px 10px 10px 0px;
}
#table-of-contents h2 {
border: 0;
text-align: center;
list-style-type: none;
}
i want to disabled thead color when active/selected, i mean thead color still #dddfe2 when sorting/thead selected.
The default clor is #dddfe2 .
CSS :
#new-izbox table thead th{
background: #dddfe2;
border-left:0px;
border-right:0px;
border-top: 0px;
border-bottom: 1px solid #dddfe2;
text-align: left;
font-weight: normal;
color: #555;
padding:10px;
margin:0px;
text-align: left;
cursor: pointer;
}
I try something like this, but no luck :
#new-izbox table thead th.selected{
background: #dddfe2;
border-left:0px;
border-right:0px;
border-top: 0px;
border-bottom: 1px solid #dddfe2;
text-align: left;
font-weight: normal;
color: #555;
padding:10px;
margin:0px;
text-align: left;
cursor: pointer;
}
any helps will be appreciated.
I want that the divider border between the table cells will be half of it's height
see preview pic:
Here is the fiddle link:
Fiddle link
#details_gdr {
height: 50px;
line-height: 25px !important;
margin-top: 3px;
}
#details_gdr tbody tr:not(:last-child) {
height: 25px;
border-bottom: 1px solid #D0E0EA;
}
#details_gdr tbody tr th:not(:last-child) {
border-right: 1px solid #D0E0EA;
}
#details_gdr tbody tr th {
width: 28px;
text-align: center !important;
}
here is your solution.
#details_gdr {
height: 50px;
line-height: 25px !important;
margin-top: 3px;
border-collapse: collapse;
}
#details_gdr tbody tr:not(:last-child) {
height: 25px;
border-bottom: 1px solid #D0E0EA;
font-size: 1.4em;
}
#details_gdr tbody tr:not(:last-child) th + th::before {
color: #D0E0EA;
content: '|';
font-size: 0.6em;
position: relative;
top: -2px;
left: -7px;
}
#details_gdr tbody tr th {
width: 28px;
text-align: center !important;
}
https://jsfiddle.net/p4ynsxt3/
you can use image at right side to be your divider like the following css:
background:url(line.png) bottom right no-repeat;
I'm experiencing a strange hover behavior on a link inside a list in Chrome.
I've managed to replicate the issue in this jsFiddle copying the whole html and css from the website.
The problem is on the first element of the side menu, which is the link with "Maria Montessori" in it. What happens is that the hover area is like interrupted in the middle, where the text is. It's like there is something covering the middle part of the button. Try it yourself to understand what I mean.
The relative code is this:
<ul class="page-menu">
<li class="page_item page-item-30">Maria Montessori</li>
<li class="page_item page-item-32">La pedagogia scientifica</li>
...
And the css:
.page-menu {
display: inline-block;
margin-right: 25px;
text-align: center;
width: 210px;
li {
margin-bottom: 10px;
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
li.current_page_parent {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
a {
background-color: $grey-light;
border-bottom: 2px solid $grey-light;
color: $grey-dark;
display: block;
font-family: Lato;
font-weight: 300;
line-height: 1.2;
padding: 15px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
ul.children {
margin-top: 10px;
li {
margin-bottom: 10px;
margin-left: 10px;
}
li a {
background-color: #f9f9f9;
border-bottom: 2px solid #f9f9f9;
color: $grey-dark;
display: block;
font-family: Lato;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
&:hover {
background-color: $blue-light;
border-bottom: 2px solid $blue-dark;
color: white;
font-weight: 400;
}
}
li.current_page_item {
a {
background-color: $blue-montessori;
border-bottom: 2px solid $blue-montessori;
color: white;
font-weight: bold;
}
}
}
.page_item_has_children > .children {display: none;} /*hides the submenu*/
.page_item_has_children.current_page_item > .children,
.page_item_has_children.current_page_ancestor > .children {display: block;} /*shows the submenu for the current page or when on its subpages */
}
Inspecting it with developer tools didn't really help and what's strange is that the issue appears to be only on the first element. And in Firefox works fine, anyway.
Your div menu-menu-1-container is overlapping to your first menu because of line height property of your div .nav-menu use padding instead
.nav-menu {
padding: 17px; /* remove line-height property */
}
Updated working Code
I have created a table in R/Shiny with 7 rows where the 2nd and the 5th are blank (as the arrows indicate).
I am trying to completely remove all vertical borders in rows 2 and 5 via css and finally present the table as having three seperate sections The table's id is Statistics I and this is my attempt in css:
#StatisticsI table {
width: 100%;
border-collapse: collapse;
border: none;
text-align: center;
}
#StatisticsI td {
padding: 8px;
line-height: 7px;
text-align: center;
vertical-align: top;
font-size: 80%;
font-family: Calibri;
font-weight: normal;
border: 1.9px solid #2e3658;
}
#StatisticsI th {
padding: 8px;
line-height: 7px;
text-align: center;
vertical-align: top;
font-size: 80%;
font-family: Calibri;
font-weight: bold;
border: 1.9px solid #2e3658;
}
#StatisticsI tr:nth-child(3),
#StatisticsI tr:nth-child(6) {
font-size: 120%;
border: none;
}
The last section is my attempt to make this happen but unfortunatelly it doesn't
You could use :nth-child() to remove border in specific rows.
td { border: 1px solid #000000; height: 10px; }
tr:nth-child(2) td, tr:nth-child(5) td {
border: 0px !important;
}
Fiddle: http://jsfiddle.net/3xx4quj0/