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;
}
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
I have a auto-generated HTML table with a few rows, and each row has a different number of columns.
I need to have a line separating the rows with is the full width of the table. I currently have a border-top which is only as long as that row, leading to different line lengths.
Here is a Fiddle to better explain my current situation
I hope that it is possible to make all the lines the same length, without knowing how many columns max there are.
Just add a border-bottom as well. This way it will always be as long as the longest line
td {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
Here is the link:
https://jsfiddle.net/obun4jv9/2/
If you don't want the last row to have a border bottom, you can do it like this:
tr {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
tr:last-of-type {
border-bottom: none;
}
Link: https://jsfiddle.net/obun4jv9/3/
If you can set the width, this is also a possibility:
tr {
width: 100%;
border-top: 1px solid black;
display: inline-block;
}
tr:first-of-type {
border-top: none
}
Link: https://jsfiddle.net/obun4jv9/7/
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:
I'm trying to create a custom styled text field for a client.
They want a trapezium shaped input field.
This is what I've done till now:
HTML
<input type="text">
CSS
input{
background: #ccc;
color: #000;
border-bottom: 50px solid #ccc;
padding-top:5px;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
height: 0px;
width: 200px;
}
Fiddle
Any idea on how or if it's possible to make something like this: .
Something like this:
<span class="outer">
<span class="inner">
<input type="text" value="test value" />
</span>
</span>
.outer {
display: inline-block;
border-bottom: 34px solid #000;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
.inner {
display: inline-block;
margin: 1px -18px -40px -18px;
border-bottom: 32px solid white;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0px;
}
input
{
background: transparent;
border: none;
display: inline-block;
font-size: 130%;
}
http://jsfiddle.net/fNCt4/4/
The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.
You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.
The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.
Once again clients being complicated!
I suggest you use a background image In the CSS of a trapezium with the outside transparent so a png. Make the margins in a bit so the user doesn't write outside the trapezium.
Hope this helps
You have two options here
CSS3
Image as a background.
for css3 option check out this link http://css-tricks.com/examples/ShapesOfCSS/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
But to make it backward compatible i would suggest you go for image as a background as a fallback for css3.
i have div called "commentbox"
and i want to have border solid color #ccc, but i want the right side, not to bordered.
so only left, top and buttom of the div should be covered with borederlines. thanks
probably
.commentbox{
border: solid #ccc;
border-right: none;
}
This would work:
.commentbox {
border: 2px solid #ccc;
border-right: none; /* though some amend this to: '0 none transparent' */
}
Effectively you declare the width, style and color of the border in the shorthand first rule, and then assign a style of none (although you could use border-right-width: 0 or border-right-color: transparent to achieve the same result in compliant browsers).
You can do this:
.commentbox{
border:1px solid color #ccc;
border-right:none;
}
The rule border:1px solid color #ccc; will apply border to all four sides but later rule border-right:none; will remove it from right side leaving you with three sides of the border.
You can read this post on CSS-Trick.Com:
Three-Sided Border