I have an HTML table with the class "productsTable". I want to give each cell in the table a border. Now I have tried the following in my stylesheet but none of the two works. What am I doing wrong? Thank You
td.productsTable
{
border: 1px dotted #999999;
}
.productsTable td
{
border: 1px dotted #999999;
}
HTML:
<table class="productsTable" width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td class="ephoneFree tableHeader" width="20%" align="center">e-phone FREE</td>
<td class="personal tableHeader" width="20%" align="center">Personal</td>
<td class="PBX tableHeader" width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
td.productsTable won't work because you have no <td> elements with a productsTable class.
However, your second CSS rule, .productsTable td, this will work because you do have <td> elements that have a parent element with the class productsTable.
I've made a quick fiddle of this, and you can see it working correctly:
td {
border: 1px dotted #999;
}
<table width="100%" height="100%" cellspacing="2px;">
<tr>
<td width="40%">We Offer:</td>
<td width="20%" align="center">e-phone FREE</td>
<td width="20%" align="center">Personal</td>
<td width="20%" align="center">Pro PBX</td>
</tr>
<tr>
<td width="40%">Pricing</td>
<td width="20%" align="center">FREE</td>
<td width="20%" align="center">£3 per month</td>
<td width="20%" align="center">From £5 per month</td>
</tr>
</table>
If this isn't working for you, its likely that you have either not correctly linked your CSS file, or there is another CSS rule overriding this. Try inspecting element to see.
I want to give each cell in the table a border.
What I've understand is you want cell border like this:
Here is the fiddle of what you want.
Use following CSS:
table.productsTable {
border-width: 1px;
border-spacing: 2px;
border-style: outset;
border-color: gray;
border-collapse: separate;
background-color: white;
}
table.productsTable td {
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
}
Hope this helps.
write like this:
.products td
{
border: 1px dotted #999999;
}
HTML
<table class="products">
<tr>
<td></td>
</tr>
</table>
Below code does the following:-
1. gives single border to td's
2. separate border to the table.
Environment:-
Works on FF 34.0.
Untried for html6:-
To run it using html6, try it with html:x eg. html:head, html:title, etc.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
<title>Welcome to the jungle</title>
<style>
.table_main {
border-top-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
border-right-style: ridge;
border-color: red;
border-width: 3px;
}
.table_main td {
background: #A38055;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
.table_main th {
background: #DCDCDC;
border-right: solid 1px white ;
border-bottom: 1px solid white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to the jungle</h1>
<table class="table_main" width="400" align="center" border="0" cellspacing="0" cellpadding="0">
<thead> <th>THead1</th> <th>THead2</th> <th>THead3</th>
</thead>
<tbody>
<tr> <td>A</td> <td>B</td> <td>C</td> </tr>
<tr> <td>X</td> <td>Y</td> <td>Z</td> </tr>
<tr> <td>Xena</td> <td>Yoda</td> <td>Zohan</td> </tr>
</tbody>
</table>
</body>
</html>
Related
How can I hide the border between those two cells while keeping them separate in the HTML code (i.e. not merging the cells using a colspan="2")? The sense of using two separate cells instead of one merged cell is to have the user-select: none attribute only for the first cell.
The default look of the borders (see image) should be kept as far as possible.
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
The expected result:
I use Chrome.
You can use the following settings:
table {
border-collapse: collapse;
border: double;
}
tr:first-child>td:first-child {
border-right: none;
}
tr:first-child>td:nth-child(2) {
border-left: none;
}
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
Version 2: Default borders - only possible with interruptions on the inner borders:
tr:first-child>td:first-child {
border-right: none;
}
tr:first-child>td:nth-child(2) {
border-left: none;
}
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
Version 3: nested table in merged cell:
table table {
border: none;
}
<table border=1>
<tr>
<td colspan="2">
<table>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
</td>
</tr>
</table>
td {
border: none;
}
table {
border: double;
}
<table border=0>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
Also you can do is simply just give border=0 without giving style attribute
Check this snippet.
You can customize the table border style.
Replace red and blue color as you want.
table {
border: 1px solid red;
padding: 4px;
position: relative;
}
table:before {
border: 1px solid blue;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
}
td {
border: none;
}
<table border=1>
<tr>
<td style="user-select: none">1)</td>
<td>Javascript</td>
</tr>
</table>
I am trying to make a table, and I want some of the rows to have 2 different colored 35px borders, kind of like this:
.
Please let me know if you know of a way to do this, all of the pots that I've seen online only tell you how to make a multicolored four sided border and I have not figured out how to modify those solutions to only apply to one edge.
You'll just need to wrap the table in a <div> and apply a left margin and a negative box-shadow.
<style type="text/css">
.outer {
padding-top: 35px;
margin-left: 35px;
box-shadow: -35px 0 0 rgba(0,0,128,0.8)
}
.outer table {
border-collapse: collapse;
}
.outer th, .outer td {
padding: 3px;
}
.ltBlue {
background-color:cornflowerblue;
color: white;
font-weight: 500;
}
.outer tr td:first-child {
width: 35px;
padding: 0;
}
.outer tr td:nth-child(5) {
text-align: right;
}
</style>
and...
<div class="outer">
<table>
<tr>
<td class="ltBlue"> </td>
<td class="ltBlue" colspan="4" style="text-align: center;">Overdue Books</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<th>Date</th>
<th>Title</th>
<th>Due</th>
<th>Fine</th>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
<tr>
<td class="ltBlue"> </td>
<td>01/20/2018</td>
<td>Goodnight Moon</td>
<td>01/14/2018</td>
<td>$6.34</td>
</tr>
</table>
</div>
This should get you where you want.
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="table_2_border" style="width:300px;border-left:1px solid orange;border-top:1px solid black;border-right:1px solid pink;border-bottom:1px solid yellow">
<table style="width:295px;margin-right:auto;margin-left:auto;border-left:1px solid green;border-top:1px solid blue;border-right:1px solid yellow;border-bottom:1px solid red">
<tr>
<th style="border-left:1px solid green;border-bottom:1px solid pink">One</th>
<th style="border-left:1px solid red;">Two</th>
<th style="border-left:1px solid blue;">Three</th>
<th style="border-left:1px solid orange;">Four</th>
</tr>
<tr>
<td>One info</td>
<td>Two info</td>
<td>Three info</td>
<td>Four info</td>
</tr>
</table>
</div>
</body>
</html>
As you can see, you can style each section to the color of your choice.
I know this was answered before, in this post, but I've been trying to apply that to my code and I don't know what is wrong.
This is what I'm trying to get:
This is what I have:
table {
border-collapse: collapse;
}
.noborders > td {
border: none;
}
<table border="1">
<thead></thead>
<tbody>
<tr>
<td>ye</td>
<td>ye</td>
<td>ye</td>
</tr>
<tr>
<td>ye</td>
<td>ye</td>
<td>ye</td>
</tr>
<tr class="noborders">
<td>no</td>
<td>no</td>
<td>no</td>
</tr>
</tbody>
</table>
this is what I've gotten with that code:
I tried with table{border-bottom:0} in css part, this almost works and I could see what is wrong is the entire table border that can't be removed from the third row when I use border: none on third row td's.
Thank you all for your time.
just change your css for .noborders > td by this
.noborders > td{
border-color: transparent;
border-bottom-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
}
the whole will be like
table{
border-collapse: collapse;
}
.noborders > td{
border-color: transparent;
border-bottom-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
}
<table border="1">
<thead></thead>
<tbody>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
</tbody>
</table>
Don't use border on whole table. You can use border on specific columns.
Try this.
.bor{
border:solid 1px #000;
}
table{
border-collapse: collapse;
}
<html>
<body>
<table>
<tr>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
</tr>
<tr>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
<td class="bor">Ye</td>
</tr>
<tr>
<td>no</td>
<td>no</td>
<td>no</td>
</tr>
</table>
</body>
</html>
now here is the solution
table{
border-collapse: collapse;
}
/*use this class */
.noborders{
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-bottom: 1px solid transparent;
}
<table border="1">
<thead></thead>
<tbody>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr><td>ye</td><td>ye</td><td>ye</td></tr>
<tr class="noborders"><td>no</td><td>no</td><td>no</td></tr>
</tbody>
</table>
Pictures are worth much more than words, in this case. See how the intersection of the top, black bar and the lightgrey, vertical bar between 'Left' and 'Right' is lightgrey instead of black? Is there a way to ensure that one border is shown 'above' another, kind of like a z-index?
How it looks:
How I want it to look (adjusted with image editor):
Here's a jsfiddle for my issue. If you don't like jsfiddle, for whatever reason, my HTML and CSS are below.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.firstRow td{
border-bottom: 1px solid black;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
Please note that, due to technological constraints, I cannot use CSS3 properties. Also note that I will not be offended if you edit my question title if you can describe the issue more eloquently than I have.
EDIT:
It was a little hacky but I was able to do something that works as you need.
HTML:
<table id="tiresTable" class="table">
<tr class="firstRow">
<td class="thSim">Tires:</td>
<td class="thXAxis borderRight">Left</td>
<td class="thXAxis">Right</td>
</tr>
<tr class="border-bottom">
<td colspan="3"><div class="black"></div></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Front</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr class="borderBottom">
<td class="thYAxis">Rear</td>
<td class="borderRight"></td>
<td></td>
</tr>
<tr>
<td class="thYAxis">Spare</td>
<td colspan="2"></td>
</tr>
</table>
CSS:
#tiresTable{
border-collapse: collapse;
}
#tiresTable tr.borderBottom{
border-bottom: 1px solid lightgrey;
}
#tiresTable td.borderRight{
border-right: 1px solid lightgrey;
}
#tiresTable td.thSim, #tiresTable td.thYAxis{
border-right: 1px solid black;
}
.border-bottom {
height: 1px;
}
.border-bottom td {
height: 1px;
border: 0px;
padding: 0px;
}
.black {
background-color: black;
height: 1px;
}
I removed anything that is not really required, and used altered classes names to know easily what is new and what is not.
Fiddle: http://jsfiddle.net/ru92py4m/15/
Is it possible to border a table row, <tr> in one go instead of giving a border to individual cells, <td> like,
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
<tbody>
<tr>
<th style="width: 96px;">Column 1</th>
<th style="width: 96px;">Column 2</th>
<th style="width: 96px;">Column 3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
This gives a border around the given <tr> but it requires a border around individual cells.
Can we give a border to <tr> only in one go?
→ jsFiddle
You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)
Thus, you need to use collapsing borders. Example:
<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>
Absolutely! Just use
<tr style="outline: thin solid">
on which ever row you like. Here's a fiddle.
Of course, as people have mentioned, you can do this via an id, or class, or some other means if you wish.
Yes. I updated my answer DEMO
table td {
border-top: thin solid;
border-bottom: thin solid;
}
table td:first-child {
border-left: thin solid;
}
table td:last-child {
border-right: thin solid;
}
If you want to style only one <tr> you can do it with a class: Second DEMO
You can use the box-shadow property on a tr element as a subtitute for a border. As a plus, any border-radius property on the same element will also apply to the box shadow.
box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
Make use of CSS classes:
tr.border{
outline: thin solid;
}
and use it like:
<tr class="border">...</tr>
Left cell:
style="border-style:solid;border-width: 1px 0px 1px 1px;"
midd cell(s):
style="border-style:solid;border-width: 1px 0px 1px 0px;"
right cell:
style="border-style:solid;border-width: 1px 1px 1px 0px;"
<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
<tbody>
<tr>
<th style="width: 96px;">Column 1</th>
<th style="width: 96px;">Column 2</th>
<th style="width: 96px;">Column 3</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid;"> </td>
<td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
You can try this (Border Just bottom of every row)
table {
border-collapse: collapse;
}
tr {
border-bottom: 1px solid black;
}
adding border-spacing: 0rem 0.5rem; creates a space for each cell (td, th) items on its bottom while leaving no space between the cells
table.app-table{
border-collapse: separate;
border-spacing: 0rem 0.5rem;
}
table.app-table thead tr.border-row the,
table.app-table tbody tr.border-row td,
table.app-table tbody tr.border-row th{
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
vertical-align: middle;
white-space: nowrap;
font-size: 0.875rem;
}
table.app-table thead tr.border-row th:first-child,
table.app-table tbody tr.border-row td:first-child{
border-left: 1px solid #EAEAEA;
}
table.app-table thead tr.border-row th:last-child,
table.app-table tbody tr.border-row td:last-child{
border-right: 1px solid #EAEAEA;
}
After fighting with this for a long time I have concluded that the spectacularly simple answer is to just fill the table with empty cells to pad out every row of the table to the same number of cells (taking colspan into account, obviously). With computer-generated HTML this is very simple to arrange, and avoids fighting with complex workarounds. Illustration follows:
<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>
<h3>Simple solution, artificially insert empty cells</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
<tr style="border-top:1px solid darkblue;">
<th>Col 1<th>Col 2<th>Col 3
<tr style="border-top:1px solid darkblue;">
<td>Col 1 only<td><td>
<tr style="border-top:1px solid darkblue;">
<td colspan=2>Col 1 2 only<td>
<tr style="border-top:1px solid darkblue;">
<td>1<td>2<td>3
</table>