I'm creating a table to display all my subjects content.
My table td vertical border doesn't appear, below is the css code.
Please help.
table.subjects {
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: gray;
border-collapse: collapse;
background-color: white;}
table.subjects th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
table.subjects td {
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: gray;
background-color: white;
-moz-border-radius: ;}
in html you shoud set border of attribute of table to 1 . did you do it?
it is solution:
<table border="1">
you can use css class like
.tableborder{
border:1px solid gray;
}
Related
I'm trying to style the bottom border of a TD. The attached image shows this working as I'd like but the border is slightly too long, I'd like it to match the width of the blue cell above it.
Here is my code:
table {
border-collapse: collapse;
width: 100%;
}
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
display: table-cell;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.active {
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom-width: 2px;
border-bottom: solid 3px #640000;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
I have no control over the HTML being used, but I can change the CSS.
Is there anyway to make the bottom border match the width of the cell excluding the left or right border width ?
Also viewing this in Firefox and the border over hang is on the other end, so on the left not the right.
You could use a pseudo element instead of a bottom border:
table {
border-collapse: collapse;
width: 100%;
}
.active,
.tab {
border-collapse: separate;
background-color: #5B86EE;
text-align: center;
border-width: 1px;
border-bottom: solid 3px #A0A0A0;
border-top: solid 3px #E1E1E1;
border-left: solid 3px #E1E1E1;
border-right: solid 3px #E1E1E1;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: relative;
}
.active:after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
border-bottom: solid 3px #640000;
}
<table border="0" width="100%%" align="center">
<tbody>
<tr>
<td class="tab">1</td>
<td class="active">2</td>
<td class="tab">3</td>
</tr>
</tbody>
</table>
I have created a button with the following HTML and CSS code.
.btnstyle2{
height: 28px;
text-align: center;
background-color: #F8F8F8;
border-radius: 3px;
border-color: #E8E8E8;
}
<button type="button" class="btnstyle2">Dismiss</button>
The issues I am having is getting rid of the right and bottom borders that are darker than the left and top borders. I need the entire border for the button to be the light gray that is stated in the CSS code as border-color: #E8E8E8. Any help would be great! Thanks!
The button is using the default styling. By setting the border to solid will override the default styles.
You can combine the border declaration of width, style and colour into one line like so:
.btnstyle2{
height: 28px;
text-align: center;
background-color: #F8F8F8;
border-radius: 3px;
border: 2px solid #E8E8E8;
}
<button type="button" class="btnstyle2">Dismiss</button>
You've got a outset style, that's default in buttons (inset in inputs for example).
If you need a solid border add this:
border-style: solid;
You can view it:
.btnstyle2{
height: 28px;
text-align: center;
background-color: #F8F8F8;
border-radius: 3px;
border-color: #E8E8E8;
border-style:solid;
}
<button type="button" class="btnstyle2">Dismiss</button>
Use this for the border.
border:1px solid #e8e8e8;
Just override the button default class unwanted properties:
button {
align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding: 2px 6px 3px;
border: 2px outset buttonface; /* bad */
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;
}
Example:
.btnstyle2{
height: 44px;
width: 46px;
text-align: center;
border-radius: 3px;
border-color: #E8E8E8;
border: none; /* new here */
background: url('https://www.linkedin.com/scds/common/u/images/logos/linkedin/logo_in_nav_44x36.png') left center no-repeat;
}
Please try this one:
Html
<button type="button" class="button1">Demo button</button>
Css:
.button1{
height: 28px;
text-align: center;
background-color:#F3F3F3;
border-radius: 3px;
border-color: #E8E8E8;
border-style:solid;
}
DEMO
You can use border: attribute insted of border-color: which you used to style borders in CSS. Also you can edit border-color, border-style on a single line like I have shown below.
The CSS:
.btnstyle2{
height: 28px;
text-align: center;
background-color: #F8F8F8;
border:2px solid #E8E8E8;
border-style:solid;
}
HTML:
<button type="button" class="btnstyle2">Dismiss</button>
I'm trying to create a input box that has only one border (i.e. border-left), but every time I put border-left to the selector, the top, right, bottom border show up (with that beveled and embossed look). Here's what I have right now.
HTML
<input type="text" id="fullname" class="detail" name="fullname" value="" />
CSS
.detail {
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Here's my JSFiddle: http://jsfiddle.net/XRFB3/
Set your default border first:
.detail {
border:0;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
JSFiddle
Try to reset borders first like border: none;. That is because browsers apply default user agent styles if the custom is not defined.
.detail {
border: none;
border-left: 1px #fff solid;
background: transparent;
width: 490px;
height: 30px;
padding-left: 10px;
}
Use the following
border: none;
border-left: 1px Solid #fff;
instead of
border-left: 1px #fff solid;
I want to set each element in the first row of my table to have a left border of a certain color and a right border of a certain color. Unfortunately, it looks like the borders of adjacent table cells are overlapping and I only get the left border color showing. The left border is supposed to be light gray and the right side dark gray.
Here is my HTML generating the table. (HTML is generated in cherrypy)
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
Here is my CSS:
table {
font-family: verdana,arial,sans-serif;
font-size:11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: collapse;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: #aeaeae;
border-left-style: solid;
border-left-width: 2px;
border-right-color: #6c6c6c;
border-right-style: solid;
border-right-width: 1px;
}
Use the below properties on your table CSS.
border-collapse: separate;
border-spacing: 0px;
table {
font-family: verdana, arial, sans-serif;
font-size: 11px;
margin-left: auto;
margin-right: auto;
border-width: 1px;
border-collapse: separate;
border-spacing: 0px;
}
td {
padding: 3px;
}
#colhead {
font-weight: bold;
text-align: left;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
#colhead_time {
font-weight: bold;
text-align: right;
background-color: #989898;
color: #000000;
border-left-color: red;
border-left-style: solid;
border-left-width: 2px;
border-right-color: blue;
border-right-style: solid;
border-right-width: 1px;
}
<table>
<th id="tbl_head" colspan='4'>%s</th>
<tr>
<td id="colhead">Track</td>
<td id="colhead">Artist</td>
<td id="colhead_time">Time</td>
<td id="colhead">Album</td>
</tr>
</table>
Fiddle Demo
In your css, you have added the wrong value for border-color property.
You write it as:
border-right-color: 1px solid #6c6c6c;
while it should be:
border-right-color: #6c6c6c;
It's your use of border-collapse: collapse; use border-spacing:0;border-collapse:no-collapse; instead.
I have a table which I'm trying to apply a background image but it doesn't show. The image path is right ( firebug says image loaded) and the table size is same as image size (156X46px)
HTML:
<!--hazard icons start here -->
<table class="hazard-table">
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<tr>
<td> 1 </td>
<td> 1 </td>
<td> 1 </td>
</tr>
<!-- hazard icons end here -->
</table>
CSS:
table.hazard-table {
background:url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
background-color: white;
}
table.hazard-table th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table td {
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table {
background:url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
background-color: white;
}
This :
background-color: white;
override the image with a background of white.
You should do instead :
table.hazard-table {
background:white url('../images/icon-item.png') no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
}
EDIT :
try this :
table{
.hazard-table {
background:white url("../images/icon-item.png") no-repeat;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
th{
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
td{
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
}
}
table.hazard-table td {
background-position:30 20 ;
As a starter, the background-position must be pixels, or "center" etc.
}
table.hazard-table td {
background-position:30px 20px ;
This "might" fix the issue.
Hope this fiddle link will work for you .
table.hazard-table {
/* background:url('../images/icon-item.png') no-repeat 0 0;*/
background:url('http://img.talkandroid.com/uploads/2013/03/wpid-photo-jan-14-2013-1115-am.jpg') no-repeat 0 -550px;
width:156px;
height:46px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color:#ebebeb;
border-collapse: collapse;
/* background-color: white;*/
}
table.hazard-table th {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
background-color: white;
-moz-border-radius: ;
}
table.hazard-table td {
background-position:30 20 ;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: #ebebeb;
/* background-color: white;*/
-moz-border-radius: ;
}