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;
}
}
Related
I have a dynamic table with 2px solid border in my web page that sometimes contains lots of rows. I am currently using page-break-before and page-break-after CSS properties.
The CSS code is as per below:
table { page-break-inside:auto }
tr { page-break-inside: avoid; page-break-after:auto }
table.table-bordered{
width: 100%;
border:2px solid black;
margin-top:20px;
border-collapse: collapse;
}
table.table-bordered td{
padding: 6px;
border:2px solid black;
margin-top:20px;
}
The main problem is, it is showing underline when page breaks.
How can I solve this issue?
Thanks in advance.
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 have a css rule...
tr.my-style td.my-style-2
{
border-top: 1px solid #F00;
}
This gives a red border to every data-cell, in every row in my table. 'my-style' and 'my-style-2' are attached to the html from a generated component.
Where do I place the first-child selector in the rule to only apply the style to the first row in my table?
Here is my actual css using 'get css path' in FireFox...
html.js body div.container div.row div.col-md-9 table#Accounts.dxgvControl_Bootstrap3 tbody tr td table#Accounts_DXMainTable.dxgvTable_Bootstrap3 tbody tr#Accounts_DXDataRow0.dxgvDataRow_Bootstrap3 td.dxgv
But '#Accounts_DXDataRow0' refers to the first row. I want to generalise the rule without using hardcoded identifiers.
I tried...
tr.dxgvDataRow_Bootstrap3:first-child td.dxgv
{
border-top: 2px solid #DDDDDD;
}
You place it at the end of the tr selector:
tr.my-style:first-child td.my-style-2
{
border-top: 1px solid #F00;
}
The :first-child pseudo-class represents the very first child of its parent. Try the sibling selector(~) instead.
/*default*/
td{border:1px solid #333}
/*style of first element*/
tr.my-style td.my-style-2{
border-top: 1px solid #F00;
}
/*style for all the rest*/
td.my-style-2 ~ td.my-style-2 {
border-top:1px solid #333;
}
JSFiddle example
Please check this answer from Lea Verou about a similar question:
https://stackoverflow.com/a/5293095/935077
I am creating a html maze using tables and for some reason, the borders dont show up correctly. Instead of nice straight lines, the borders show up as diagonal blobs instead. Is there a way to fix this? Here is my example : http://thomaswd.com/maze.
Output:
My CSS:
section .l {
border-left:20px solid #ff9c00;
}
section .r {
border-right:20px solid #ff9c00;
}
section .t {
border-top:20px solid #ff9c00;
}
section .b {
border-bottom:20px solid #ff9c00;
}
section table {
margin-right:auto;
margin-left:auto;
border:20px solid #FF9C00;
}
Remove border: 20px solid transparent; from your section table tr td selector (not shown in your code sample) and it looks fine.
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.