I am using google visualization table to make an table and I try to make each row has a border and implement it like this:
https://jsfiddle.net/5u7ay1jj/4/
However, the border CSS seems not work. How can I make it working? And also, the default google table css will highlight the even row, not the odd row, how does this happen?
Table rows don't have borders. Assign the borders to the table cells in the rows instead.
.rowodd .google-visualization-table-td {
background-color: Linen;
border: 4px solid #000000;
}
.rownormal .google-visualization-table-td {
background-color: #EAF2D3;
border: 4px solid #000000;
}
https://jsfiddle.net/MrLister/5u7ay1jj/5/
Edit:
On reconsidering, I suspect you meant something like this, to add the borders around the rows only, not between the cells in the rows.
.rowodd .google-visualization-table-td {
background-color: Linen;
border: 4px solid #000000;
border-width: 4px 0 0 0;
}
.rownormal .google-visualization-table-td {
background-color: #EAF2D3;
border: 4px solid #000000;
border-width: 4px 0 0 0;
}
tr:last-child .google-visualization-table-td {
border-bottom-width:4px;
}
.google-visualization-table-td:first-child {
border-left-width:4px;
}
.google-visualization-table-td:last-child {
border-right-width:4px;
}
https://jsfiddle.net/MrLister/5u7ay1jj/6/
Related
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;
}
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/
The quickest way to demonstrate this is https://jsfiddle.net/9jL30wjh/1/
I have a responsive table that stacks on a mobile device. Pretty simple but I want the white borders on the table to be transparent through to the body background. If I set the borders to transparent then the background of the actual cell is shown so the whole table looks like a block colour (actually an opacity but I don't think this matters). That makes sense I guess but since I cant have a margin on the table cells, I can't decide how to work around this or even if I can in this setup. Can anyone shed any light?
I am using the following CSS for a display: table layout.
body {
background-color: #3498db;
color: #fff;
}
.pcp-table {
display: table;
table-layout: fixed;
width: 100%;
background: transparent;
padding: 10px 0 3px 0;
}
.pcp-table__row {
display: table-row;
width: 100%;
border-bottom: 1px solid;
background: transparent;
}
.pcp-table__cell {
display: table-cell;
background: rgba(255, 255, 255, 0.4);
height: 30px;
line-height: 30px;
padding: 0 10px;
border-right: 7px solid;
border-bottom: 1px solid;
}
I belive I achieved your desired effect. See this fiddle.
All that I do was add the following lines of code
.pcp-table {
border-spacing: 1px;
}
.pcp-table__cell {
border: 0;
}
#media screen and (max-width: 768px) {
.pcp-table {
border-spacing: 0;
}
.pcp-table__cell {
margin-bottom: 1px;
}
}
The trick was not to use an actual border but to simulate it using either border-spacing or margins.
Later edit: Another cool way to achieve this effect is by using background-clip: padding-box; combined with border-color: transparent;. You can see this example in this fiddle.
From background-clip docs:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
I think an image best describes this: JS FIDDLE HERE: http://jsfiddle.net/fp2Ak/
What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)
As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.
You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.
The CSS that governs most of this so far:
table.Timetable td , table.Timetable th
{
border-spacing: 0px;
padding: 0px;
}
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.bookingStart
{
border-left: 2px solid black;
}
.bookingEnd
{
border-right: 2px solid black;
}
Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.
JSfiddle of it here: http://jsfiddle.net/fp2Ak/
spans have to be floated in order to be affected by width, so you could do something like:
td span{float:left; width:100%; min-width:100%;}
or more accurately if I am understanding your css properly:
.bookingStart, .bookingMiddle, .bookingEnd
{
background-color: white;
color: Black;
border-top: 2px solid black;
border-bottom: 2px solid black;
float:left;
width:100%;
min-width:100%; /*some browsers like this better*/
}
Your should put your borders on the td's not the spans. This will allow you to also put some padding on the td's to make even the long numbers look good.