I've created TABLE mentioned below:
<html>
<body>
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<colgroup>
<col span="1" style="width:5%">
<col span="1" style="width:70%">
<col span="1" style="width:25%">
</colgroup>
<tr>
<td colspan="2">
<div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 100px;">Sample Text 1</div>
</td>
<td rowspan="5">
<section class="loginform">
<fieldset style="border-radius: 5px; padding: 5px;">
<legend>Template</legend>
<ul style="padding: 10px;">
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</fieldset>
</section>
</td>
</tr>
<tr>
<td>val</td>
<td>
<div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; color:black; border:1px solid #e5e5e5; min-height: 80px;">1 Only</div>
</td>
</tr>
<tr>
<td>bal</td>
<td>
<div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">2 only</div>
</td>
</tr>
<tr>
<td>nal</td>
<td>
<div style="width:100%; color:black; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Both 1 and 2</div>
</td>
</tr>
<tr>
<td>dul</td>
<td>
<div style="width:100%; box-shadow: 1px 1px 1px #cfcfcf; border-radius:10px; color:black; border:1px solid #e5e5e5; min-height: 80px;">Neither 1 nor 2</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
In this table; I want to ensure that height of Template (section on right hand side) ; is always equal to height of five ROWS of the table. If data inside template is more, it should come with scroll-bar. But in no case it should go beyond height of five rows of the table. Can you please suggest ?
You will have to set a fixed height.
Check out this one :-
http://jsfiddle.net/8tFnG/
<fieldset style="border-radius: 5px; padding: 5px;height: 450px; border: solid 1px red;">
If you know the height of the five rows on the left, you could "restrict" the height of your "Template" fieldset with a simple css rule: max-height: 400px; overflow: hidden; overflow-y: scroll; where 400px is the height of the five rows in the table; overflow is hidden and overflow on y-axis is set to scroll. Try it out:
.loginform fieldset{
height: 400px;
max-height: 400px;
overflow: hidden;
overflow-y: scroll;
}
Another option is to use JavaScript. You could find out the height of the table containing the five rows, and then adjusting the height of the "Template" fieldset on page load.
Hope this helps.
add position:fixed to the element
Try this css:
<style>
fieldset{ height: 450px;overflow-y:hidden;}
</style>
Related
I am using the following plugin.
https://github.com/dabeng/OrgChart.
In some resolution, the vertical line is not fitting properly.
https://github.com/dabeng/OrgChart/issues/410
I have analysed the rendered html and tried with the same code.
I am getting the same issue for some resolutions.
Please see the following fiddler.
.downline{
height:30px;
width:2px;
background:red;
text-align:center;
background: red;
text-align: center;
background-color: rgba(217, 83, 79, 0.8);
margin: 0px auto;
height: 55px;
width: 2px;
float: none;
}
.leftLine{
border-right:1px solid green;
}
.rightLine{
border-left:1px solid green;
}
table{
margin:50px;
border-spacing: 0 !important;
border-collapse: separate !important;
}
.item{
padding:5px;
border:1px solid black;
}
<table>
<tr>
<td colspan="2">
<div class="downline">
</div>
</td>
</tr>
<tr>
<td class="leftLine">
</td>
<td class="rightLine">
</td>
</tr>
<tr>
<td colspan="2" >
<div class="item">
Test 123
</div>
</td>
</tr>
</table>
I am doing an example having tables in a table, but parent table should not have border. I tried, but it is working. I check in W3School css tutorial also even no result. I tried:
style="border: none;"
border:0
Both not working in Chrome
th {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
td {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
<table id="t02" border="0">
<tr>
<td>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th>Available<br>On</th>
<th>Ids</th>
</tr>
<tr>
<td><b>Phone</b></td>
<td><b>9999999</td>
</tr>
</table>
</td>
<td>
<br><br>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
</tr>
<tr>
<td><b>Phone</b></td>
<td><b>9999999</b></td>
</tr>
</table>
</td>
</tr>
</table>
Output
Several issues in your code...
...missing a closing bracket...
...why using inline styles...
...IDs should be unique - use a class for your "t01"...
But main important advice: do not use tables for layouting, these days.
Rather learn flexbox, or CSS grid.
The following does not achieve the result
<tr><td colspan="4">Title</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td width="33.33%">1</td><td width="33.33%">2</td><td width="33.33%">3</td></tr>
<tr><td width="33.33%"> </td><td width="33.33%"></td><td width="33.33%"></td></tr>
The there is an extra space after the third cell to take into account the 4th column. How can I remove this so that the entire row is equally divided into three cells that fill it?
For equal widths you should create 2 table like this:
<table>
<tr><td colspan="4">Title</td></tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Here is the fiddle: http://jsfiddle.net/Q57gW/2/
The best answer would be to not use table. If you REALLY need that table, one (very messy) soultion could be to have 12 columns in each row, and have colspan="3" in your first row, and colspan="4" in your other rows.
jsfiddle link for this solution
<table><tbody>
<tr>
<td style="border: 1px solid #333; width: 240px;" colspan="12">Title</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
<td style="border: 1px solid #333; width: 60px;" colspan="3">1</td>
</tr>
<tr>
<td style="border: 1px solid #333; width: 80px;" colspan="4">1</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">2</td>
<td style="border: 1px solid #333; width: 80px;" colspan="4">3</td>
</tr>
</tbody></table>
But I would HEAVILY advice you to use divs or spans or something else than table cells. Here's a much nicer solution using paragraphs:
jsfiddle link
html:
<div style="width: 240px;">
<p class="onecell">Title</p>
<p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p><p class="fourcell">1</p>
<p class="threecell">1</p><p class="threecell">2</p><p class="threecell">3</p>
</div>
css:
p {
float: left;
border: 1px solid #333;
box-sizing: border-box;
padding: 0;
margin: 0;
}
p.onecell {
width: 100%;
}
p.fourcell {
width: 25%;
}
p.threecell {
width: 33%;
}
I'm new to html and I'm trying to create tables and style them but they are not styled as I'd like: http://jsfiddle.net/DpLy5/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabeller</title>
<style>
body{
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</tr>
</table>
</body>
</html>
The middle row first column should be 150px wide but its bigger then that. I don't know what it could be. Any help? Thank you
You need to add a colspan='3' on your first and third row tr. As you have it set to 700px and it's a single column it will push the one above/below it to the same:
http://jsfiddle.net/spacebean/DpLy5/1/
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
</tr>
</table>
Also, I highly suggest using non-inline styling as it will make it a lot easier to see what you are doing and separate style from content.
http://jsfiddle.net/spacebean/DpLy5/8/
<table class='myTable'>
<thead>
<tr>
<th colspan='3'>
<img src="http://placehold.it/700x150" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>adad</td>
<td class='main'>adad</td>
<td>adad</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
</tr>
</tfoot>
</table>
css:
.myTable {
width: 700px;
}
.myTable td, .myTable th {
border: solid 1px black;
}
.myTable thead th {
height:150px;
}
.myTable tbody td {
width: 150px;
height:700px;
background-color: #808080;
}
.myTable tbody td.main {
width: 400px;
background-color: #fff;
}
.myTable tfoot td {
height:75px;
background-color: #808080;
}
Make the td in the first tr span the three columns using colspan="3" similar to the td in the last tr.
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
JS Fiddle: http://jsfiddle.net/DpLy5/3/
you will need to add colspan="3" to in first row & last row... that's it.
http://jsfiddle.net/DpLy5/6/
<table style="border: 1px solid black;">
<tr>
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>
You are in need of the colspan attribute. The colspan attribute in fact says "Let me span this amount of column in the table".
Which means colspan="3" is translated to "Let me span 3 columns in the table"
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
However, according to your JSFiddle, you are trying to make a raster for your layout. Achieving this with the use of table's is a no-go, it's a major bad practice.
This is because a table is something where you put data in, and an entire layout is not data.
The best way to set up and layout is using Div's. http://www.w3schools.com/html/html_layout.asp
The mouseover function is not working with Google Chrome. Working fine with Firefox and IE. While mouseover the border bottom is not disappearing. But if removing border-collapse: collapse it's working fine. Why is this? Any solution.
css:
html, body{
margin: 0;
padding: 0;
}
.table {
border-collapse: collapse;
}
.border {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border1 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #deecf9;
border-left: 0px;
border-right: 0px;
}
.border2 {
border-style: solid;
border-width: 1px;
border-color: #000000;
background-color: #FFFFFF;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
padding: 1px;
}
Table:
<table width="1024" border="0" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
<td class="border1" onmouseover="this.className='border2'" onmouseout="this.className='border1'"> </td>
</tr>
</table>
Do it like this: put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.border1
{
border:1px solid #000000;
border-left:1px solid transparent;
border-right:1px solid transparent;
background-color: #FFFFFF;
}
.border1:hover
{
border:1px solid transparent;
border-top:1px solid #000000;
padding:1px;
background-color: #deecf9;
}
Your HTML should be something like:
<table width="1024" align="center" bgcolor="#FFFFFF" class="table">
<tr>
<td height="9" colspan="4" class="border"></td>
</tr>
<tr>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
<td class="border1"> </td>
</tr>
</table>
No need to work with the mouseovers as an attribute, just use css.
Edit: i've noticed that you're using the css border-collapse property. This sets whether the table borders are collapsed into a single border or detached as in standard HTML. Try removing this line or set it to "separate", maybe this will work.