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.
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;
}
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'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 want to CSS a table, but I can't render the line between "tr":
Add this CSS:
td {
border:1px solid #000;
}
Simply add attribute rules="all" to your <table>.
Putting the CSS on the tr element doesn't always work out too well.
You could try something like this if you're going for just row borders:
td {
border-bottom:1px solid #000;
}
just try this
table {
border-left:1px solid #000;
border-bottom:1px solid #000;
}
td {
border-top:1px solid #000;
border-right:1px solid #000;
width:50px;
padding:0 0 0 10px;
}
working demo
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.