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
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 HTML in this fashion
<div class="image_area">
<a href="<?php echo base_url();?>product-detail?product=<?php echo $pl['product_slug'];?>">
<img src="<?php echo base_url().$pl['product_image'];?>"
style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
</a>
</div>
I want a hover effect on the image such that the border gets highlighted.
I have used this CSS code, but nothing happens
.image_area img :hover{ border: 1px solid #b6e2ff}
.image_area img:hover{ border: 1px solid #b6e2ff}
No space after img
And to avoid jump of image when hovered, do :
.image_area img{ border:1px solid transparent}
or you can even better do
.image_area a:hover img{ border: 1px solid #b6e2ff}
EDIT thanks to nevermind
I didn't see this:
style="width:196px;min-height:250px; max-height:250px; border:1px solid #cfcfcf;"/>
remove border:1px solid #cfcfcf from there, and put it in
.image_area img{ border:1px solid transparent}
or .image_area a img{ border:1px solid transparent}
No space between img and :hover
You can use
.image_area > a img:hover{border:1px solid #b6e2ff;}
two notes:
1. do not use style in your html code, add a new class with the following css:
width:196px;
min-height:250px;
max-height:250px;
border:1px solid #cfcfcf;
you missed the ";" tag in the end of your line. try use this code:
.image_area img:hover { border: 1px solid #b6e2ff; }
I try to do a little forum to train a little on web design. How can I change that table design to have a 3 dimensions (3D) table ? Or if there is any solution to improve its design, that will be maybe better !
Otherwise, any criticism is welcome!
/* Tableaux -------------------------------------------------------------------------------------*/
table {
border-collapse: collapse;
}
pair {
background-color: #efefef;
}
tr.impair {
background-color: #fff;
}
th {
color: #D89845;
border: 1px solid #D89845;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
td {
border: 1px solid #ddd;
padding: 5px;
font: normal 8pt verdana, helvetica, sans-serif;
}
PS: I will keep the best suggestion as validation of the subject.
Thanks in advance.
You can use box-shadow is the best solution to give any object a 3d look & feel.
box-shadow use browser specipic prefixes like -webkit, -o, -moz etc . Here I just gave the link where you can find out more about it & can study how it works. I also many times just created such type of objects that have just 3d feel.
Link to box-shadow.
Maybe you can do anything with this,
CSS:
.gridtable {
border:1px solid #000000;
height:149px;
width:342px;
overflow-x: scroll;
}
.fixedcell {
height:30px;
padding:0 2 0 2px;
background-color:#C2BFA5;
border-left:1px solid #E1E0D2;
border-top:1px solid #E1E0D2;
border-right:1px solid #8D8961;
border-bottom:1px solid #8D8961;
}
.gridcell {
height:30px;
background-color:#ffffff;
padding:0 2 0 2px;
border-right:1px solid #C0C0C0;
border-bottom:1px solid #C0C0C0;
}
Edit
Link to 3d effects : http://www.w3schools.com/cssref/pr_border-style.asp
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 currently have the following table definition:
<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">
I am trying to transform it to CSS, using:
table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}
The table doesn't render as it should, though. What am I doing wrong?
Secondarily, if I want to not apply this styling to one of my tables in specific, how do I do so?
I expect problem is with cellpading and/or cellspacing.
This is not valid CSS:
cellspacing = 0px;cellpadding = 1px
There are already some questions about that :
Set cellpadding and cellspacing in CSS?
Why are cellspacing and cellpadding not CSS styles
I hope this helps you.
Here you are & have a good year!
You need to optimize the tables in css with border, paddings and colors versus cellpadding and default stuff. Code for all tables in your site:
table {
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF;
}
table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}
table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}
table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}
and for tables with no common styling just add the class to the table tag (exapmle1):
table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}
table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}
table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}
table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}
Also you can customize many things with more classes...
table.exapmle1 td {
text-align: center;
}
table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}
table.exapmle1 td.right {
text-align: right;
}
and add class to the td tag for example.
Hope this helps.
It is generally not possible to transform the table-related HTML attributes so that the exact appearance is preserved. The main reason is that the HTML attributes have vague definitions and different interpretations in different browsers, as you can see e.g. by viewing a page with the given attributes on IE and Firefox. It is not possible to replicate this browser-dependence in CSS.
The following stylesheet, which assumes that your markup has <table class=t>, tries to replicate a “typical” or “average” rendering of a table with the given attributes:
table.t {
border-collapse: collapse;
border: outset #CEDFEF 2px;
}
table.t th, table.t td {
border: inset #CEDFEF 2px;
padding: 1px;
}
It’s seldom useful to convert presentational HTML attributes to CSS. When designed new or completely rewritten documents, it is better to start from the desired appearance rather than some existing or hypothetical HTML attributes. For example, solid borders usually look better than the outset or inser borders that <table border> creates, and a padding of 1px is seldom appropriate (usually you want either no padding or a few pixels on left and right, none on top and bottom).
General info: Mapping presentational HTML to CSS. See also subsection Tables in section Rendering of the WHATWG HTML5 draft.
This is the another one way in CSS styling..!!
while styling many tables in html, we can follow this way..!!
Hope it is help full
In Css:
#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}
In Body section, simply we can give the name...!!
<table id="list">