I have table with few rows. I want 1st and 3rd row height to be set to 1 px and the 2nd row to normal height. But my code is not working.
HTML CODE goes below
<table border="0">
<tr style="height:2px;" >
<td width="10"><hr></td>
</tr>
<tr style="height:20px;" >
<td width="10">Hello</td>
</tr>
<tr style="height:20px;" >
<td width="10"><hr></td>
</tr>
</table>
Could anyone please tell me how to do it ?
Note: I dont want borders to be used because i Want for certain rows i may or may not need the horizontal line inside the rows.
Add style="padding:0px; margin:0px;" to your hr and change the height of your third tr to 2px
You will have :
<table border="0">
<tr style="height:2px;" >
<td width="10px"><hr style="padding:0px; margin:0px;"></td>
</tr>
<tr style="height:20px;" >
<td width="10px">Hello</td>
</tr>
<tr style="height:2px;" >
<td width="10px"><hr style="padding:0px; margin:0px;"></td>
</tr>
</table>
Related
If there is an overlapping join on different rows of the table, then the row may disappear:
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
</tr>
</tbody>
</table>
This is unacceptable. May have to abandon the "table" tag. What to do?
It's not 100% clear what you mean. But I've removed the rowspan's and added colspan's to the code. Colspan will span your cell over multiple columns/cells.
More info can be found here:
https://www.w3schools.com/tags/att_td_colspan.asp
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td>
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R3C1 (row 3)</div>
</td>
</tr>
</tbody>
</table>
You've included two td elements on the first row of your table, but only one td element on the second and third rows of your table, which will break your table layout - the browser doesn't know which column the cell is supposed to span. Fix this and your table should work.
There a couple of problems:
Table wrongly formatted (make sure the number of td matches, even if they are empty)
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Styles wrongly applied (apply them by using <style> or referencing a stylesheet)
<table style="color:white;background-color:black;">
Extra: Don't use so many divs
While there isn't exactly a problem with using the divs you are using, using too many of them will usually lead to bad practices.
You can use some CSS tricks to hide border of last column so that the table is aligned as per your requirement.
table td.last {
border-left: hidden;
border-top:hidden;
}
table td.last2 {
border-left: hidden;
border-bottom:hidden
}
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td colspan="2">
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2" style="border-right:hidden">
<div>R2C2:R3C2 (row 2)</div>
</td>
<td class="last2"><br></td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
<td class="last"><br></td>
</tr>
</tbody>
</table>
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.
I have a table with two rows.
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.
I have this code for the table :
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.
If I give the first row's <td> the width value of 500px lets say, it sets the second row's first <td> to the same size.
What am I doing wrong ?
You should use the colspan attribute on the first row's td.
Colspan="3" will set the cell to flow over 3 columns.
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
You want to use the colspan attribute like this:
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center" >check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
If you're using JSX (React) it should be written like this. The s in colspan is capitalized and the value is a number instead of a string.
<td colSpan={3}>Text</td>
You can use colspan
<td align="center" colspan="3">check</td>
http://www.w3schools.com/tags/att_td_colspan.asp
Using colspan like this:
<tr>
<td align="center" colspan="3">check</td>
</tr>
By colspan you merge the following cells in a row to one. If you use 2 in your sample you get one cell with a width of the first two columns and the third is as the third in the rest of the table.
alter the first row with the below
<tr>
<td colspan="3" align="center">check</td>
</tr>
I have a HTML table.
1st row has 5 elements while 2nd row has only 3 elements.
Why 3 columns of the 2nd row gets the width same as width of respective columns in previous row?
I mean since there are only 3 columns in 2nd row, are they not supposed to auto-resize to fill the row?
I tried setting the width of 2nd column in 2nd row, but that ALSO increases width of 2nd column in 1st row, which I don't want.
Any help appreciated.
EDIT
Required output
Hey now used to colspan
as like this
<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="35%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td colspan="5">
<table width="100%" cellspacing="5" cellpadding="0">
<tr>
<td class="blue2">Create Blog</td>
<td class="blue3">Custimize Blog</td>
<td class="blue4">Success</td>
</tr></table>
</td>
</tr>
</table>
Css
table tr td{
text-align:center;
}
.blue{
background:lightblue;
}
.blue2{
background:red;
}
.blue3{
background:blue;
}
.blue4{
background:green;
}
live demo http://tinkerbin.com/vqnhht02
and now change to width or height according to your design
Try this:
`<table width="100%" cellspacing="0" cellpadding="0">
<tr class="blue">
<td width="20%"></td>
<td width="15%"></td>
<td width="15%">SignUp</td>
<td width="15%">Create Blog</td>
<td width="15%">Custimize Blog</td>
<td width="15%">Success</td>
</tr>
<tr>
<td class="blue" colspan="2">Create Blog</td>
< td class="blue" colspan="2">Custimize Blog</td>
<td class="blue" colspan="2">Success</td>
</tr>
</table>`
Give the background color as per your need.
This width issue is fixed I think.