I have following HTML code with style...
Below is the table with 5 rows... only table corner is getting bordered not the rows.
I want the rows as well outlined with same style.
<table width="330" cellspacing="0" cellpadding="0" style="border-width:1px;border-color:black;border-style:solid;border-collapse: collapse;" >
Out put is coming as
You need to set the style on the <tr> tag.
<tr style="border:1px solid #000"></tr>
Since people seem to be a bit lazy one this one I have created a demo to better explain this.
HTML:
<table width="330" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
CSS:
table {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
tr {
border: 1px solid;
}
td {
width: 100px;
height: 40px;
}
DEMO HERE
You put the border on tr for the rows. If you want the cells you put it on td. You should also use border-collapse:collapse; on the table. Have a play with it to see what how it works. In short it will collapse the borders into single border (so they don't sit next to each other causing a larger border)
CSS:
td {
width: 100px;
height: 40px;
border: 1px solid;
}
DEMO HERE
Update:
Table with a class:
CSS:
.ruddy {
border-width:1px;
border-color:black;
border-style:solid;
border-collapse:collapse;
}
HTML:
<table class="ruddy" width="330" cellspacing="0" cellpadding="0">
</table>
DEMO HERE
Read on border-collapse.
Specifically, you need border-collapse: collapse;
actually border in css for the table will be applicable only on the table not on TR..
because CSS define for the table can not be inherit on TR or TD
if you want to have border on TR then u must define the border property in CSS for the TR element
tr
{
border:1px solid black;
}
or for column use the TD instead for TR.
To give borders to ROWS you need is another rule:
table tr{
border:1px #000;
}
in html
<table width="330" cellspacing="0" cellpadding="0" class='table' >
in css
.table
{
border:1px solid #000;
}
.table td,.table tr
{
border-collapse: collapse;
}
You should apply the style at tr not the table, so it goes like the following:
<tr style="border-width:1px;border-color:black;border-style:solid;">
But I think it's easier if you use the border attribute. The output is almost similar:
<table border="1" width="330" cellspacing="0" cellpadding="0" >
Related
Is there a way to make the table column two look like column one while keeping the th tag. The line separating the two still has to be there.
The code I got so far:
.noborders th {
border-bottom: 0;
}
table {
border-collapse: collapse
}
#test {
border-collapse: collapse;
border: 0;
}
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
<tr>
<td id="test"></td>
<td></td>
</tr>
</body>
What I want it to look like
What it looks like
First, place your <th> inside <tr>...
Use class instead of id(id should be unique)
Just set border:0 to all td, th and apply border-right to .test
th,
td {
border: 0;
}
td {
padding: 20px;
}
table {
border-collapse: collapse
}
.test {
border-collapse: collapse;
border-right: 1px solid;
}
<table cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th class="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td class="test"></td>
<td></td>
</tr>
</table>
You have a lot of terrible code here. For one, fix your formatting, for two, you're missing a lot of tags (closing </body>, and a <tr> wrapping your headers). Three, you don't even have the class you're referencing in your css on the table itself. Fourth, you can't have multiple ID's with the same name.
<style>
.noborders th {
border-bottom:0;
}
table {
border-collapse:collapse
}
#test {
border: 0;
}
</style>
HTML
<body>
<table class="noborders" cellpadding="0" cellspacing="0" width="100%" border="1">
<tr>
<th id="test"><b>One</b></th>
<th><b>Two</b></th>
</tr>
<tr>
<td id="test2"></td>
<td></td>
</tr>
</table>
</body>
there is th/td property called “rowspan” that will do what you want.
https://www.w3schools.com/tags/att_td_rowspan.asp
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}
I have looked for many posts but I could not find an answer that suits this problem. I have tried with table-layout:fixed, changing widths to extreme values but the attribute width is still being ignored. Here is my code:
<table style="width:100%; table-layout:fixed; border: 1pt solid black;
border-collapse: collapse;" border cellpadding=3 cellspacing=0>
<tr>
<th align=center colspan="4"
style="width:100%; color:white; background-color:#475678; font-weight:bold;">
Oferta de traducción para: ' . $cliente . '
</th>
</tr>
<tr>
<td style="border-right:1pt solid black; width:10%;">Fecha</td>
<td align=center style="border-right:1pt solid black; width:10%;">Fecha</td>
<td style="border-right:1pt solid black; width:40%;"></td>
<td style="width:30%;">Fecha</td>
</tr>
</table>
Your issue was using table-layout: fixed;
Here is my retake on it.
Within the <style> you should put this into your css but assign an id or class to it if you're using tables elsewhere that are different:
table {
width: 100%;
border:1pt solid black;
border-collapse: collapse;
}
table td {
width:25%;
border-right: 1pt solid black;
text-align: center;
}
table th {
width: 100%;
color: white;
background: #475678;
font-weight:bold;
}
<table cellpadding="3" cellspacing="0">
<tr>
<th align=center colspan="4">Oferta de traducción para: ' . $cliente . '</td>
</tr>
<tr>
<td>Fecha</td>
<td>Fecha</td>
<td></td>
<td>Fecha</td>
</tr>
</table>
If you want to keep your CSS in the actual code, just remove the table-layout from <table> styling.
the table-layout: fixed is the one that ignores your widths.
from MDN HTML table-layout says like this about the table-layout: fixed,
Table and column widths are set by the widths of table and col
elements or by the width of the first row of cells. Cells in
subsequent rows do not affect column widths.
Try remove table-layout:fixed; and it will work.
HI take a look at this simple code:
http://jsfiddle.net/8GsZa/
What I want is something like this:
By adding the .tborder class to tr or td wont work.
Use css border-collapse property , that may fix your problem
.tborder
{
border-collapse:collapse;
}
.tborder,.tborder td,.tborder th
{
border:1px solid #427BD6;
}
FIDDLE DEMO
Demo Fiddle Here
mention .tborder tr td in your css
.tborder tr td
{
border:1px solid #427BD6;
}
<table border="0" class="tborder" cellspacing="0" cellpadding="0">
<tr>
<td align="center">Title1</td>
<td align="center">Title2</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
</table>
.tborder tr td{
border:1px solid #427BD6;
}
My goal is to make an HTML page that is similar to a "photo frame". In other words, I want to make a blank page that is surrounded by 4 pictures.
This is my code:
<table>
<tr>
<td class="bTop" colspan="3">
</td>
</tr>
<tr>
<td class="bLeft">
</td>
<td class="middle">
</td>
<td class="bRight">
</td>
</tr>
<tr>
<td class="bBottom" colspan="3">
</td>
</tr>
</table>
And the CSS classes are the following:
.bTop
{
width: 960px;
height: 111px;
background-image: url('../Images/BackTop.jpg');
}
.bLeft
{
width: 212px;
height: 280px;
background-image: url('../Images/BackLeft.jpg');
}
.middle
{
width: 536px;
height: 280px;
}
.bRight
{
width: 212px;
height: 280px;
background-image: url('../Images/BackRight.jpg');
}
.bBottom
{
width: 960px;
height: 111px;
background-image: url('../Images/BackBottom.jpg');
}
My problem is that I am getting thin white lines between the cells of the table, I mean that the border of pictures is not continuous. How can I avoid these white spaces?
<table cellspacing="0" cellpadding="0">
And in css:
table {border: none;}
EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.
I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).
I did like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
----------
.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}
Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:
<table class="tab">
<tr>
<td class="first">first row</td>
</tr>
<tr>
<td class="second">second row</td>
</tr>
</table>
<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}
</style>
You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.
Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)
table {
border-collapse: collapse;
}
For me I needed to do something like this to completely remove the borders from the table and all cells. This does not require modifying the HTML at all, which was helpful in my case.
table, tr, td {
border: none;
}
In a bootstrap environment none of the top answers helped, but applying the following removed all borders:
.noBorder {
border:none !important;
}
Applied as:
<td class="noBorder">
In a bootstrap environment here is my solution:
<table style="border-collapse: collapse; border: none;">
<tr style="border: none;">
<td style="border: none;">
</td>
</tr>
</table>
This is what resolved the problem for me:
In your HTML tr tag, add this:
style="border-collapse: collapse; border: none;"
That removed all the borders that were showing on the table row.
Using TinyMCE editor, the only way I was able to remove all borders was to use border:hidden in the style like this:
<style>
table, tr {border:hidden;}
td, th {border:hidden;}
</style>
And in the HTML like this:
<table style="border:hidden;"</table>
Cheers
Use this Css style in your global CSS
.table,
.monthview-datetable td,
.monthview-datetable th {
border: none !important;
}
table {
border: none;
}
You can user this css property to hide table border.
Nothing of the answers here worked in 2022 (at least for Chrome) except <table cellspacing="0" cellpadding="0">. However I needed a CSS solution, not the HTML one. So here it is:
table,
thead,
tbody,
tfoot,
tr,
th,
td {
padding: 0;
border-spacing: 0;
}
padding is the CSS synonym for HTML cellpadding and border-spacing is respectively for cellspacing. Not quite an obvious thing though.
Given:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<table>
Using this on your CSS would work:
tr {
border: transparent 1px solid;
}
I found border-spacing to be my issue
td, th, tr, table {
border: 0 !important;
border-spacing:0 !important;
}