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/
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 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>
Hi SO I have what one day might be used on my web page that is a block of tabs (very basic currently) and I want them to be aligned in such a way that there is 5 blocks on the first line and 4 blocks on the second but they both align horizontally to end at the same point (so it doesn't look like one is missing)
here is a link to what I have currently http://jsfiddle.net/xs8d6zuh/2/
html -
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span><br></br>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
CSS -
a {
text-decoration: none;
color: #000000;
border: 2px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid;
border-color: #d5c898;
display: inline;
width: 123px;
text-align: center;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
<div class="container">
Bavaria
twenty letters long
twelve lette
eight123
ten letter
twenty letters long!
sixteen letters!
1seven
sixsix
</div>
CSS
.container {
font-size: 0px;
}
a {
text-decoration: none;
text-align: center;
color: #000000;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
padding: 6px;
border: 1px solid #d5c898;
display: inline-block;
}
a.five {
width: calc(20% - 14px);
}
a.four {
width: calc(25% - 14px);
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
https://jsfiddle.net/xs8d6zuh/2/
use calc() function
"for first 4 use width:calc(100% / 4);
for remaining 3 use width:calc(100% / 3);"
if u have 7 span elements
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
}
span {
flex: 1 0 20%;
display: block;
text-align: center;
}
a {
display: block;
text-decoration: none;
color: #000000;
border: 2px;
padding: 6px;
background-color: #f6f0e0;
font-family: Arial;
font-size: 14px;
border: 1px solid;
border-color: #d5c898;
}
a:hover {
background-color: #000000;
color: #f6f0e0;
}
<div class="container">
<span>Bavaria</span>
<span>twenty letters long</span>
<span>twelve lette</span>
<span>eight123</span>
<span>ten letter</span>
<span>twenty letters long!</span>
<span>sixteen letters!</span>
<span>1seven</span>
<span>sixsix</span>
</div>
JSfiddle Demo
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
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;
}