I have a table inside of a table, I want the outer table to always be 100% of the parent's width with no horizontal scrolling and then the inner table to have a horizontal scroll bar (only if it has enough columns that it needs it).
Here's an example that is causing the html element to scroll and is making the outer table stretch, this is no good.
Fiddle: https://jsfiddle.net/w31Lhe8w/6/
When you show the inner table you see it stretch the outer table, and when it's hidden the outer table fits it's parent perfectly with no scrolling. Ideally, keeping the html the same (except for some css classes of course) would be best as this html is what works best in my project. Any solution may be helpful, however.
Thanks.
Here is one way of doing it.
First, add position: relative to the containing td element:
<td colspan="6" style="position: relative;">
You then apply a new CSS rule to the enclosing div:
<div class="innertable">
as follows:
.innertable {
border: 1px dotted blue;
overflow: auto;
position: absolute;
left: 0;
right: 0;
}
This seems to work pretty well for one or more rows of the inner table.
See fiddle at: https://jsfiddle.net/audetwebdesign/c7o3f0mp/
Related
I have an HTML structure from an legacy app I have to style like our new app. For this I need to add margin only for the tbody. So setting padding in table won't work because the header should be as wide as the table.
Here's a little sketch what it should look like:
Why do I need that? I have to put two tables side by side and it should look like as there is only one header but two content tables.
I played around with padding and borders of the thead element but the problem is that the thead has a bottom border which isn't applied to the right border.
Edit:/
The picture is about what I want. The two tables are mentioned because that's the reason I want one table to look like that.
Solutions are welcome if they style the table like I showed in the picture or style two tables with two different tbodys and theads like they would have one thead.
What I need are still correct labels for the columns in tbody but the left and the right column should be a little bit wider to stretch it to the whole table.
Edit:/
Because there was some confusion what I meant here is a screenshot of the style I want to accomplish without altering the DOM structure with JS:
set display:table to tbody and use custom width for that easily.
Complete Demo
HTML:
<table>
<thead>
<tr><td>Head1</td></tr>
<tr><td>Head2</td></tr>
</thead>
<tbody>
<tr><td>Body1</td></tr>
<tr><td>Body2</td></tr>
<tr><td>Body3</td></tr>
<tr><td>Body4</td></tr>
</tbody>
</table>
CSS:
table{
width: 500px;
background: #808080;
}
thead{
width: 100%;
text-align: center;
background: #FF6347;
}
tbody{
display: table;
width: 400px;
margin: 0 auto;
text-align: center;
background: #FFF;
}
your calendar is actually two subtables (including a header with day names). from that point of view, using two cells with padding on the outer table would give you the desired effect
I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}
I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.
I'm looking for a 3 column css layout, with 1 fixed section at the middle and 2 fluid sidebar around it:
http://www.uploadup.com/di-UEFI.png
middle has 250px width (for example) and sidebars have (at minimum) 150px width. if browser width was longer than 550px (250+300), sidebars should have a longer width. (and middle always is 250px)
What is the CSS can do it? with compatibility in all browsers.
note: i saw this page, but i don't know how to change it for my wish
You can try to use inline-blocks for it. They are used rather rarely, but sometimes they are pretty good for layouts.
So, look at this: http://jsfiddle.net/kizu/UUzE9/ — with inline-blocks you can create layouts with any number of fixed and fluid columns. The algorithm:
At first, you add the padding equal to the sum of all the fixed columns to the wrapper. In your case — 250px.
Then, you add min-width to the wrapper equal to the sum of all the fluid columns' min-width.
Then, you add white-space: nowrap to the wrapper, so the columns won't jump.
And then just add the all columns that you need.
If you need support for IE7 and lesser, there are some additional things to know except for common inline-block fix:
You must return white-space: normal to the inner child of a column, or the columns won't stay on one line.
There can appear a phantom scroll in IE, maybe there is a better way to remove it, but I just use overflow: hidden on some wrapper.
Enjoy :)
To make this work in IE6/7 without JavaScript, the easiest way to do this is with a table.
I know, I know. It's not that bad in this case, all considered.
See: http://jsfiddle.net/thirtydot/Q2Qxz/
Tested in IE6/7 + Chrome, and it will just work in all other modern browsers.
HTML:
<table id="container" cellspacing="0" cellpadding="0">
<tr>
<td id="left">fluid</td>
<td id="mid">fixed</td>
<td id="right">fluid</td>
</tr>
</table>
CSS:
html, body {
margin: 0;
padding: 0;
border: 0
}
#container {
border: 0;
table-layout: fixed;
width: 100%
}
#container td {
vertical-align: top
}
#mid {
width: 250px;
background: #ccc
}
#left {
background: #f0f
}
#right {
background: #f0f
}
If you don't use one of the ready templates out there,
You can start by three div floated left, the middle with width: 250px and the outside ones with
min-width: 150px
You might want to replace it with the <section> tag, just give it a display: block
I'm trying to create a calendar in an HTML table design with CSS element div elements as appointment blocks in absolute positioning which is working fine, but since the block is absolute, which makes me able to overlap as many rows as I want to create appointments, it doesn't stretch horizontally which is what I want. How can I make the absolute div block stretch? Or is there a better solution? (Constraint: has to support IE6+). The issue is highlighted below.
Below is a snippet example of the code:
<table class="calendar_dayview_tableformatting">
..
<tr>
<td class="calendar_dayview_cell">
a href="#" class="calendar_dayview_dayformatting">09</a>
<div class="preference">
<div class="preference_appointment"></div>
</div>
</td>
</tr>
</table>
.preference {height: 60px; min-width:445px ; border: 1px solid #ffc61e; background-color: #ffc61e; margin-top: -1.4em; margin-left:2.5em; position:relative;}
.preference_appointment {height: 180px; min-width:445px ; border: 1px solid black; background-color: #f9eaad; position:absolute; margin-top:-1px;z-index:1;}
If you specify the right and left css properties the absolutely positioned div's width will expand to the width of its container offset by the right and left property values.
Can you provide a sample of html as well as the css please.
It would be helpful if you posted more information about your problem, including some sample markup and a link to a demo page.
Based on what you've posted so far, it looks like you're using min-width which isn't supported by IE6.
If you want to use absolute positioning in IE, you'll also need to specify both a vertical position (top or bottom) and a horizontal position (left or right) in absolute (e.g. px, em) or relative units (e.g. %). You can't specify both left and right in IE6 either, contrary to what the earlier response suggests.
Other than those caveats, absolute positioning sounds like it should work for what you want across all the browsers you need to support. However, without more information I can't provide any more specific advice.