How to edit css for `<TH></TH>` headers in `HTMLTable`? - html

I want to change the border colors surrounding my header tables from the default grey given by the packageHTMLTable to black. I cannot figure this out for some reason. I've tried the following:
htmlTable(data, css.table = "margin-top: 0.5px; margin-bottom: 0.5px; border: 1.5px solid black;", css.cgroup="border-bottom: 1px solid black; border-top: 1.5px solid black; text-align: center;", file = "data.html")
I've also changed css.cgroup to css.rgroup but nothing happens. Help would be much appreciated!

There must be a better way to do this using the HTMLTable package, but this will do the trick:
mytableout <-htmlTable(data)
sink("data.html")
cat("<style>th {border-bottom: 1px solid black !important;border-top: 2px solid black !important;}</style>")
print(mytableout,type="html",useViewer=TRUE)
sink()
Black:
Grey:

Related

Draw borders but not the last one

I have a table and in these 2 columns I need to have a border, but in the last number I do not want it to have a border, I tried already "border-top: 1px solid #000;" but does not help.
My current CSS style:
.myStyle{
border-bottom: 1px solid #000;
}
I attach the 2 images:enter image description here
i)In one I target with a skyblue arrow the border I do not want to have.enter image description here
ii)In the other picture It is a yellow arrow and it is how it needs to be.
Maybe something like this?
.myStyle:not(:last-child) {
border-bottom: 1px solid #000;
}
or
.myStyle {
border-bottom: 1px solid #000;
}
.myStyle:last-child {
border-bottom-color: transparent;
}

CSS Chrome - Div with 0px height (and top-bottom border) not possible

I have a problem with the chrome browser. When I make custom "hr" tag with a "div" and top and bottom border, there is a white 1px line between the borders ...
IE and Firefox do well.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
I try different thing (overflow, height 0px) but with no success.
My Chrome Browser is up to date (Version 62.0.3202.94)
Thank you
Simon
Actually that is not a white space, you used light-grey color to bottom and both border top and bottom attached and it's illusion like there is white space. If you want shadow for bottom of your custom hr then you can use following css for it -
.nav_links_container_line {
border-top: 1px solid #096ebd;
box-shadow: 0px 2px 10px #000;
}
What about using a real <hr/>? With that, I don't have the rendering issue you encountered, and it actually makes more sense to use hr in its own role.
.nav_links_container_line {
border-top: 1px solid #096ebd;
border-bottom: 1px solid lightgrey;
border-left: none;
border-right: none;
}
<br><br><br><br>
<div class="nav_links_container_line"></div>
<hr class="nav_links_container_line"/>

CSS Overwrite DIV.class border-top

Friends,
I am using a major BI vendors analytics software and so far I managed
to overwrite a couple of .CSS classes with my own design choices however
it does not seem to work for the following case:
enter image description here
I tried the following two ways but those did not work:
DIV.clsAppPane {background-color: #000000!important;border-top: 1px solid #000000!important;} .clsAppPane {background-color: #000000!important;border-top: 1px solid #000000!important;}
I would be greatefull for any ideas.
Well this is not an answer but the only way I can add another image.
I have added the large white line. That was my doing and it works.
Now I want to get the green line (colored using Google Dev Tools just to highlight it - it is white be default) also in black or just remove it.
But...my css code does not work.
See image for more details- larger scrren print
/*does not work*/
DIV.clsAppPane {
background-color: #000000!important;
border-top: 1px solid #000000!important;
}
.clsAppPane {
background-color: #000000!important;
border-top: 1px solid #000000!important;
}
/*works*/
.appbar {
border-bottom: 1px solid white;
background-color:#2C2C2C;
You need to add an space before !important:
DIV.clsAppPane {background-color: #000000 !important;border-top: 1px solid #000000 !important;} .clsAppPane {background-color: #000000 !important;border-top: 1px solid #000000 !important;}

Reducing height of "footer-widget-container" (currently 182px)

I'd like to reduce the current height of 182px of my 'footer-widget-container' (I'm using Wordpress theme Press Coders).
However, I can't find the relevant file to edit
(have tried footer.php, black.css and style.css, anyone know which file I need to edit?
Please see the site at:
http://www.oxfordlifestylecentre.co.uk/
add this to your style.css file
.footer-widget-container {
height: 125px;
}
what height you want to just change it.
Your css code for Footer is in Style.ccs.
Open it and find
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
And then just adjust height
.footer-widget-container {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
height:200px; /***Your Desired Height**/
}

When i'am trying to give border style dotted in browser it showing solid border below is my css

.myclass {
border: 6px dotted #2d2d2d;
width:200px;
height:200px;
border-radius:100% 100% 100% 100%;
}
When i'am trying to give full border radius to border: 6px dotted #2d2d2d; in browser it showing solid border not dotted above is my css code please help me.
This only happens in Firefox I think it's a bug - it's because of the radius - you might consider using an image in this case.
CSS border radius for dotted border
Instead of writing:
border: 6px dotted #2d2d2d;
try:
border-style: doted;
border-width: 6px;
border-color: #2d2d2d;
Thats what I use when I write CSS.