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
Related
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.
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden"></td></tr>
<tr><td rowspan="2">B2</td><td class="hidden"></td></tr>
<tr><td>C3</td><td class="hidden"></td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
I have a html structure like this and I can't figure out how to fix it.
<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</td>
</tr>
</table>
I'd like to collapse the borders between the external table and the table inside the <td>.
Is it possible?
After that I'd like to have the border of the internal table with another color from the external table.
What you're seeing is the borders of the cells in the internal table, not it's external borders. The tricky thing is that you don't want to turn off the borders of those cells completely because then it'll look skoogiwampus.
Try
.internal {
border: none;
}
.internal td,
.internal th {
border-color: yellow;
}
.internal tr:first-child th {
border-top: none;
}
.internal tr:last-child td {
border-bottom: none;
}
.internal tr td:first-child,
.internal tr th:first-child {
border-left: none;
}
.internal tr td:last-child,
.internal tr th:last-child {
border-right: none;
}
This uses pseudo-selectors to deal only with the borders you need to turn off. It's verbose, but it'll do what you need.
https://jsfiddle.net/aff19ahg/3/
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" >
Well I have the following HTML:
<table cellspacing="0" cellpadding="0" width="100%">
So I validated my HTML document and I found that these are obsolete. But if I remove them my website alignment won't work as I want. I need a good enough way to replace the attrbutes with CSS code.
<style type="text/css">
.table1_style
{
border-collapse: collapse;
border-spacing: 0px;
}
.table2_style
{
width: 100%;
}
</style>
<table class="table1_style">
<tr>
<td>
</td>
</tr>
</table>
<table class="table2_style">
<tr>
<td>
</td>
</tr>
</table>
You have to write in css this things:
border-collapse: collapse;
border-spacing: 0px;
width: 100%;