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/
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 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/
I'm making use of the table-reflow on my HTML tables. I'm simply looking to put borders around the rows in the table. When I inspected the element via Chrome and see that jQuery Mobile appends the following class to the table:
ui-responsive table-stroke ui-table ui-table-reflow
Thus I looked to add the following style:
.ui-responsive .table-stroke .ui-table .ui-table-reflow tr
{
border-style:solid;
border-width:5px;
}
But some how I still don't get border around the rows, regardless of the screen size. Any ideas how I could achieve this
I assume from your description that you only want borders around the rows at full width and not the individual cells, and then when the table reflows you again want borders around each row (which are actually cells displayed on separate rows).
If so here is a DEMO
In the CSS, the media query is for when the table is viewed on wider screens. In this case we give the TR (rows) a border and set the cell borders to 0. When the screen is narrow and the table reflows, the TR border is 0, and the TD borders are set. You should play with the CSS in the demo to get what you want.
.ui-table tr {
border: 0px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
border: 2px solid rgb(51,51,51);
border-left:4px solid rgb(51,51,51);
border-right:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:first-child, .ui-table-reflow.ui-responsive th:first-child {
border-top:4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td:last-child, .ui-table-reflow.ui-responsive th:last-child {
border-bottom:4px solid rgb(51,51,51);
}
#media ( min-width: 35em ) {
.ui-table tr {
border: 4px solid rgb(51,51,51);
}
.ui-table-reflow.ui-responsive td, .ui-table-reflow.ui-responsive th {
border: 0;
}
}
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.