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>
Related
I want to create 2 tables with the opening hours of 2 shops. I would like them to align next to each other in the middle of the page when there is room for it. And otherwise, I want them to center align under each other? For some reason, this really isn't working.
I'm using a Saas solution and I don't have access to the css files so I need to use inline css?
Could someone help me with this?
<div style="width: 100%; padding: 5%; display: flex; justify-content: center;">
<div style="padding: 2%;">
<h3 style="text-align: center;">Rotterdam</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Maandag</td>
<td style="width: 50%; height: 15px;">12:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag </td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">10:00 - 18:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">10:00 - 17:30 </td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">12:00 - 17:30</td>
</tr>
</tbody>
</table>
</div>
<div style="padding: 2%;">
<h3 style="text-align: center;">Capelle a/d IJssel</h3>
<table style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<tbody>
<tr style="height: 13px; text-align: left; align: center;">
<td style="width: 50%; height: 13px;">Maandag</td>
<td style="width: 50%; height: 13px;">12:00 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Dinsdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Woensdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Donderdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:30</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Vrijdag</td>
<td style="width: 50%; height: 15px;">09:30 - 21:00</td>
</tr>
<tr style="height: 15px; text-align: left;">
<td style="width: 50%; height: 15px;">Zaterdag</td>
<td style="width: 50%; height: 15px;">09:30 - 17:00</td>
</tr>
<tr style="height: 15px;">
<td style="width: 50%; height: 15px; text-align: left;">Zondag</td>
<td style="width: 50%; height: 15px; text-align: left;">Gesloten</td>
</tr>
</tbody>
</table>
</div>
</div>
You just need to add
box-sizing: border-box;
to the main div: this is telling the browser to calculate the children width with the remaining width inside that div.
For the responsiveness you should use media queries to change the alignment
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.
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.
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 :-(
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>