The following code works well in Chrome and IE, but does not working in Firefox.
The table is generated dynamically and tr/td can't be removed from the following example
.widget-table-container,
tr td {
border: 1px solid red;
}
.widget {
border: 1px solid green;
margin: 0px;
padding: 0px;
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
height: 100%;
width: 100%;
left: 1px;
top: 1px;
bottom: 0px;
right: 0px;
}
<table class="widget-table-container">
<tbody>
<tr>
<td colspan="2" rowspan="2" style="width: 378px; height: 378px;">
<div class="widget" style="width: 371px; height: 371px; background-color:lightblue;">
<div class="widget-title">
<p>Title</p>
</div>
<div class="widget-body"></div>
</div>
</td>
<td colspan="8" rowspan="4" style="width: 1512px; height: 756px;">
<div class="widget" style="width: 1493px; height: 745px;">
<div class="widget-title">Title CPU</p>
</div>
<div class="widget-body">BODY</div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2" rowspan="2" style="width: 378px; height: 378px;">
<div class="widget" style="width: 371px; height: 371px;">
<div class="widget-title">
<p>Some Title</p>
</div>
<div class="widget-body"></div>
</div>
</td>
</tr>
<tr></tr>
</tbody>
</table>
I have removed last empty and it looks like fixed problem.
I'm not sure why only removing last tr fixed problem not all tr.
But i my case it is working, Thanks All for help.
Related
I have begun creating an OrgChart using HTML and CSS. One issue I have run into is creating an intersecting chart flow-line between <tr> and <td> elements.
I created container, vertical-line and horizontal-line definitions that I wrapped into <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` for the horizontal-line to intersect in the middle with the vertical-line. However, the line remains at the bottom.
I have added the CSS and HTML to my post and hope that one of you can help me on what I am doing wrong.
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: auto;
}
tr {
border: none;
}
th,
td {
border-collapse: collapse;
border: 1px solid black;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100;
}
div.container {
width: 40px;
}
div.vertical-line {
border-left: 1px solid red;
height: 55px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
div.horizontal-line {
border-bottom: 1px solid red;
height: 1px;
margin-top: auto;
margin-bottom: auto;
width: 40px;
}
<table>
<tr>
<td style="background-color: goldenrod" colspan="3">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
<tr>
<td style="width: 42.5%; background-color: wheat">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
<td style="width: 15%">
<div class="container">
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
<td style="width: 42.5%">
<div style="background-color:#CCFFCC">Dept
</br>
<b>EmpName</b>
<div style="border-bottom: 1px solid">
</div>
<div style="background-color:#CCFFFF">Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
</table>
Here's a workaround:
add another horizontal line before the vertical line:
<td style="width: 15%">
<div class="container">
<div class="horizontal-line"> </div>
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
Then change the display of it's container to flex:
div.container {
display: flex;
width: 40px;
}
I´m sure this is the most stupid question for HTML developers. But I´m not one of them.
I have the following table and I need to get the three rounded images inside the table to be a circle and not like they are showing. I cannot get them to be rounded even if I have set width to be on 50px. The divs are like 'filling' the table row. I´m sure that what I ´m trying to do is pretty easy. Can someone help me?:
This is the HTML Code:
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 100%; height: 100%; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%; ">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
If you put the 50px height and 50px width on the circle itself instead of it's container you will get a perfect circle. I also added margin:0 auto to center them but you may not need this.
<div style="align-items:center; text-align: center; width:300px; height:200px; margin:0 auto">
<table border="1">
<tbody><tr style="height: 200px">
<td style="height: 200px; width: 300px;" colspan="3" align="center" valign="middle">
<div style="background-color: red; width: 150px; height: 150px; border-radius: 25px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; border-top-left-radius:50%; border-top-right-radius:50%;">
</div></td>
</tr>
<tr>
<td colspan="3">
<h3 class="col-md-12 text-center" style="align-items: center">
Cantidad de Gente: <strong>Poca</strong>
</h3>
</td>
</tr>
<tr style="height: 50px; padding-top: 10px;">
<td style="height: 50px; width: 50px;">
<div style="background-color: green; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: yellow; width: 50px; height: 50px; border-radius: 50%;margin:0 auto;">
</div></td>
<td style="height: 50px; width: 50px;">
<div style="background-color: red; width: 50px; height:50px; border-radius: 50%; margin:0 auto;">
</div></td>
</tr>
<tr>
<td>
Poco
</td>
<td>
Mediana
</td>
<td>
Mucho
</td>
</tr>
</tbody></table>
</div>
The table you created has width 300px, whereas the row with three circle you are defining has width 50px each i.e. 150px total. And since the table row element suppose to fill the table width, it is stretching your row to 300px. You need to increase the width and height of row td element to 100px to make cover the whole row or if you want the circle strictly 25px radius then you can add padding to your td element.
I have a gwt website and if I use the zoom function of my browser the content is displayed behind the menu. So no one can read the tables.
the used layout code looks like this:
<div id="globalContent" style="width: 100%;">
<table class="" cellspacing="0" cellpadding="0" style="width: 100%; height: 100%;">
<tbody>
<tr>
<td align="left" colspan="2" style="vertical-align: middle;">
<div id="headerContent"> </div>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top; width: 270px">
<div id="navigationContent" class="" style="float: left">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="navigationPanel" cellspacing="0" cellpadding="0" style="height: 100%;" aria-hidden="false"> /*menu goes here*/
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td style="vertical-align: middle;">
<div id="mainContent" style="float: left; width: 100%">
<table class="bodyPanel" cellspacing="0" cellpadding="0" style="height: 775px;"> /* Content goes here /* </table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Edit: Css
#globalContent {
background-color: #F1F1F1;
}
.bodyPanel {
width: 100%;
height: 100%;
background-color: #F1F1F1;
margin-top: 70px;
position: absolute;
}
.navigationPanel { /*border: 2px Black;*/
width: 260px;
max-width: 260px;
height: 100%;
min-height: 800px;
background-color: #F1F1F1;
margin-right: 10px;
position: fixed;
z-index: 1;
margin-top: 70px;
}
When "navigationPanel" has position: fixed and mainContent has position: absolute.
The Content appears right of the menu but it ist 270px to width.
I have to support IE8 so I can't use CSS3 :-(
Given the HTML below how do I limit the min height of my yellow cell with the blue cell's height - I can't use min-height as blue boxes height is defined in the external style.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 600px; height: 400px;">
<table style='background-color: #ccc; width: 100%; height: 100%;'>
<tr>
<td></td>
<td></td>
<td style="width: 100%; height: 100%;"></td>
<td></td>
<td id='ry' style="height: 100%; background-color: green;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td id='bx' style='background-color: yellow;'>
<table style="width: 100%; height: 100%;">
<tr>
<td style='width: 33.33%; height: 100%;'>
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; width: 100%; height: 100%;">
<div style=" width: 30px; height: 30px; margin-left: auto; margin-right: auto; border: 1px solid #ccc; background-color: blue;">?</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
This is an experiment I'm working on for a layout. I had a lot of issues positioning divs to achieve this effect, so I turned to the old standby, table cascades. My problem here is that that last upper box has extra padding in all 3 browsers and I cannot seem to CSS or HTML it away no matter what I try. The red boxes should be flush over the green bits you see surrounding them and there shouldn't be a 1px visible green line to the right of the blue row between the red boxes. Any insight would be extremely appreciated.
<!doctype html>
<html>
<head>
<style>
table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
td table { border-collapse: collapse; border-spacing: 0; padding: 0; margin: 0;}
img { display: block; }
</style>
</head>
<body style="background-color: black;">
<table style="background-color: white; height: 525px; width: 3200; padding-top: 25px; padding-bottom: 25px;">
<tr>
<td colspan="1" style="width: 350px;">
<table class="container" style="height: 475px; width: 350px; margin-left: 25px; margin-right: 25px;">
<tr>
<td style="background-color: green; height: 225px; width: 350px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 350px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 175px;">
</td>
<td style="background-color: blue; height: 200px; width: 25px;">
</td>
<td style="background-color: green; height: 200px; width: 125px;">
</td>
</tr>
</table>
</td>
<td colspan="1" style="width: 125px;">
<table class="container" style="height: 475px; width: 125px; margin-right: 25px;">
<tr>
<td style="background-color: red; height: 475px; width: 125px;">
</td>
</tr>
</table>
</td>
<td colspan="1">
<table class="container" style="height: 475px; width: 450px; margin-right: 25px;">
<tr>
<td style="background-color: green; height: 25px; width: 225px;">
</td>
<td style="background-color: blue; height: 225px; width: 25px;" >
</td>
<td style="background-color: green; height: 225px; width: 225px;" >
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 450px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 450px;" colspan="3">
</td>
</tr>
</table>
</td>
<td colspan="1">
<table class="container" style="height: 475px; width: 400px; margin-right: 25px;">
<tr style="height: 225px;">
<td style="background-color: green; height: 225px; width: 275px;">
<table style="width: 100%; height: 225px;">
<tr>
<td style="height: 100px; width: 225px; background-color: red;">
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 225px;">
</td>
</tr>
<tr>
<td style="height: 100px; width: 225px; background-color: red;">
</td>
</tr>
</table>
</td>
<td style="background-color: blue; height: 225px; width: 25px;" >
</td>
<td style="background-color: green; height: 225px; width: 100px;" >
</td>
</tr>
<tr>
<td style="background-color: blue; height: 25px; width: 400px;" colspan="3">
</td>
</tr>
<tr>
<td style="background-color: green; height: 200px; width: 400px;" colspan="3">
</td>
</tr>
</table>
</td>
</table>
</td>
</table>
</body>
</html>
Do you mean this?
http://jsfiddle.net/Nq8Us/1/
I've edited your code and removed the extra 'padding' of green under red in question, by removing inline-styling, then added some styles in css pointing to the #problem_cell_table.
I suggest you remove all your inline styling and shift them to the stylesheet. Inline-styling overrides all stylesheet code. That's bad and also explains why you don't get any effect from stylesheet changes.
As to why there's a padding, it's because your main table's height that is wrapping all the rows, cells, and inner-tables, is higher than the declared row height added together. The cells in your all the rows automatically adjusts it's size to compensate for pixels that doesn't add up to your total declared of 525px.
In the example I've done, I "cheated" by setting css of the inner-table to height: 100% so it will expand to fit the height, should miscalculations occur.
Give me a moment, I'll add more to the <div> styling methods in my answer.
Edit:
Ok here my attempt at the layout using <div> and CSS. http://jsfiddle.net/XbFcJ/
Remember to use a CSS Reset Stylesheet first!
The CSS:
<style>
body{
background: black;
}
.wrapper{
}
.container{
width: 1500px;
}
.content-table {
border: 25px solid #fff;
overflow: hidden;
background: #fff;
}
.content-column {
margin-right: 25px;
float: left;
height: 475px;
}
.content-column.last {
margin-right: 0;
}
.first, .third, .last {
width: 425px;
background-color: green;
margin-right: 25px;
}
.top{
height: 225px;
border-bottom: 25px solid blue;
}
.left {
height: 225px;
width: 200px;
border-right: 25px solid blue;
}
.content-column.second {
width: 100px;
background-color: red;
}
.last .left {
background-color: red;
}
.last .left .top {
height: 100px;
border-bottom: 25px solid blue;
}
</style>
The HTML:
<body>
<div class="wrapper">
<div class="container">
<div class="content-table">
<div class="content-column first">
<div class="top">
</div>
<div class="bottom">
<div class="left">
</div>
</div>
</div>
<div class="content-column second">
</div>
<div class="content-column third">
<div class="top">
<div class="left">
</div>
</div>
<div class="bottom">
</div>
</div>
<div class="content-column last">
<div class="top">
<div class="left">
<div class="top">
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
</body>