I have a div, and inside of that div I have a table. Inside of the table I have many rows that contain a click-able span, a checkbox, a label, and a div. The click-able span will get data from the server and append a new table following the same structure to the current TD's div. This is repeated until there is no data left to retrieve.
My issue is that at small resolutions, the labels text will go wonky, slipping under the checkboxes and spans like so:
Ideally, if the labels extend past the table I would like to add a horizontal scroll-bar, though I'm not entirely sure how. My CSS:
#media (max-width: 500px) {
#div-myTableWrapper{
/*EMPTY*/
}
#myTable{
border-collapse: separate;
background-color:#d8d8d8;
border: 2px solid black;
border-radius: 15px;
padding-left: 10px;
width:100%;
overflow: auto;
min-width:250px;
}
.subTable{
margin-left:15px;
}
}
Any help is appreciated. I'm seeing this issue on a resolution of 300px wide.
EDIT 1:
HTML Snippet:
<table id="myTable">
<tr>
<td>
<span class="openBoxNode"></span>
<input type="checkbox" class="CheckBox">
<label class="Label">Deep1</label>
<div id="Deep1">
<table class="subTable">
<tr>
<td>
<span class="openBoxNode"></span>
<input type="checkbox" class="CheckBox">
<label class="Label">Deep2</label>
<div id="Deep2">
etc...
You should be able to keep the checkbox and label from wrapping to the next line by adding the style white-space:nowrap; to the td elements. This should force it to be wider then the containing div and then the scrollbar should appear.
Add max-height: 500px to #myTable.
You will get a vertical scroll bar when the height increases more than 500px and a horizontal scroll bar if the width increases more than 250px.
Related
I'm making a web-based calculator, which I styled with CSS. Now I want to make this responsive so it is usable on smartphones. The following is a part of my HTML
<table class="buttonTable">
<tbody>
<tr>
<td>
<input class="button_standard" type="button" value="7"></input>
</td>
<td>
<input class="button_standard" type="button" value="8"></input>
</td>
<td>
<input class="button_standard" type="button" value="9"></input>
</td>
<td>
<input class="button_operator" type="button" value="รท"></input>
</td>
</tr>
<tr>
<td>
<input class="button_standard" type="button" value="4"></input>
</td>
<td>
<input class="button_standard" type="button" value="5"></input>
</td>
...
</tr>
...
</table>
What I'm trying to achieve for screen sizes of about 450px and below is that the buttons become reponsive, and start using percentages (it would be weird to use percentages for desktop screen sizes, as it would then create buttons with widths of about 500px).
This is a picture of what it looks like on desktops or other large screens (alot of the surrounding white has been cut away):
I have my CSS set up as follows (showing only relevant things):
table {
text-align: center;
margin: 10px auto;
}
td {
width: 70px;
height: 50px;
padding: 2px;
}
input[type="button"] {
width: 100%;
height: 100%;
...
}
#media (max-width: 450px) {
td {
width: 25%;
}
...
}
As I want the buttons to be 25% of the whole screen each, I set the width to 25%. You would expect the buttons to be 25% each, so covering the whole screen but with a margin of 2px. This is what happens instead:
What am I missing that causes this? I already tried styling the buttons themselves (the input[type="button"] elements) with the width of 25% but that was even worse.
What's interesting is that when the screen width hits the table width like shown above, the elements actually do change dynamically until they hit their minimum width defined by the text inside and such.
I really don't understand what's going on here.
The problem is with the table element. It doesn't know how wide to be, so it will make itself as small as possible, and then the tds will be 25% of the table's width.
Change the width of the table to be 100%, and you will be good.
I would change the table to be full width of the parent, as well as the input, and then put a max-width of say 25em-30em on the parent.
That would look something like this:
table, input {
width:100%;
}
main {
max-width: 27.5em;
margin: 0 auto;
padding: 0 1em; // for mobile
}
On the back of getting this question answered, I have a page that looks like this.
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
</div>
This page if there are a lot of spans will not wrap and it will keep going horizontally on the page and give me a horizontal scroll bar. Inside each span i have a html table but i am not sure that is important for question.
This works well but i have an issue when one of the spans is really long vertically and the others are short because you have to scroll down vertically to actually see that you have the horizontal scroll bar. I am trying to figure out a way to solve this so the horizontal scroll bar is always visible on the page regardless of how vertically long a particular span section is.
As an example, if you take alook at trello (see screenshot below). If you have a really long section vertically it add a vertical scroll bar JUST on that section, so the whole page doesn't need to be scrolled down.
In my case inside each span is a html table. What is the recommended way of implementing a vertical scroll bar just for that table (and not the whole page)?
You need a max-height and overflow-y on the interior elements, and you need to set sizes on the outer elements:
HTML
<div class="outer">
<div class="inner">foo</div>
<div class="inner">bar</div>
<div class="inner">whatever</div>
</div>
CSS
.outer {
border: 2px solid red;
float:left;
top:0;
bottom:0;
position:absolute;
}
.inner {
max-height:100%;
overflow-y:auto;
border: 2px solid blue;
width:30%;
margin-right:2%;
float:left;
}
Here's a working fiddle
body, html {height: 100%}
.what_wraps_your_span {overflow-y: scroll; max-height: 100%;}
I am trying to find a simple way to create a 1 row, 3 column table using css. I want the table width to be the width of the container div, and the height to be just 1 line. The first and third column should expand to contain the width of the text. The middle column should fill any remaining width (up to the container width), with overflow hidden.
I am having trouble with the middle column. When I use white-space:nowrap and overflow:hidden it extends the table beyond the width of the container div.
<div style="width:500px;">
<table style="width:100%;">
<tr>
<td style="white-space:nowrap;">
Title is Here
</td>
<td style="">
When this is too long to display on one line the overflow is hidden
</td>
<td style="white-space:nowrap;">
Last updated 12:05pm
</td>
</tr>
</table>
</div>
or is there maybe an easier way using div? but I can't seen to figure out how to make the center div only fill the space available instead of moving to the next line.
<div style="width:500px;">
<div style="float:left;">
Title is Here
</div>
<div style="float:left;">
When this is too long to display on one line the overflow is hidden
</div>
<div style="float:right;">
Last updated 12:05pm
</div>
</div>
you could do it with div based layout too
css
.table{width: 100%; }
.table, .table .item{ height: 20px; overflow: hidden;}
.table .item{float: left; box-sizing: border-box; -moz-box-sizing: border-box; background: #fcc; text-align: center;}
.table .item.right{float: right;}
.table .center{float: none; background: #ccf; }
markup
<div class="table">
<div class="item left">left content</div>
<div class="item right">right content</div>
<div class="center item">some center content</div>
</div>
your middle td doesn't have any width or height specified. Therefore, it has default width:auto and height:auto. That's why, it always scales itself up. If you try to give your td a fixed width, it will scale vertically.
You can stop this by giving it a fixed height and width along with display:inline-block;
same goes for divs also. but in case of divs, you don't need to specify display:inline-block;
you need to give your td (first sample ) or div(second sample) a fixed width and height, to hide the overflow i.e. to make overflow:hidden; work.
table based layout:
try this css in your middle td : see this fiddle
.middle
{
height:20px;
width:70%;
overflow:hidden;
display:inline-block; /*add this property also for the td */
}
div based layout
give your div this css: see this fiddle
.middle
{
float:left;
width:40%;
height:20px;
overflow:hidden;
}
I have the following peculiar problem. Lets start with a code snippet:
...
<td>
<div class="scrollable">...</div>
...other cell content...
</td>
...
Now I want the table render as if the div.scrollable wouldn't take any horizontal space (i.e. the div.scrollable doesn't push on the right side of the table), but show the horizontal scrollbar (on the div.scrollable, not on the whole cell) if the div.scrollable is wider then the containing cell. Is that possible to do via CSS?
Thanks!
Using your basic example you would likely need a set width on the td and to use overflow and overflow-y. overflow-y is CSS3 only but you didn't specify IE8 and below.
EDIT sorry you also need display:block; on the td
td { display: block; width: 50px; }
.scrollable { overflow: scroll; overflow-y:hidden; }
UPDATE:
See the jsfiddle example, notice the 100% width on the table and the fixed layout.. thats to stop the example from just adding a horizontal scroll to the viewport and carrying on.
http://jsfiddle.net/MMeTe/4/
Credit goes to Pricey as his jsfiddle example answers the question, but to have the answer with the code here, I attach it bellow:
...
<style type="text/css>
.mytable {
table-layout: fixed;
}
.scrollable{
overlow-y: auto;
}
</style>
...
<table class="mytable">
<tr>
<td>
<div class="scrollable">...</div>
other content...
</td>
</tr>
</table>
I'm trying to accomplish something that I thought would be simple, but it seems that when it comes to CSS, you never know!
I have an image float to the left. Beside it, I have a title and under that title, but still besides the image, I want to display a table taking all the remaining width. In IE and Chrome, the table ends up under my image while in Firefox, it takes more that 100% (an horizontal scroll bar is displayed). Firefox gives a result closer to what I want, but I don't want the scrollbar.
Here some code that I tried to make work using w3school "try it" editor (http://www.w3schools.com/css/tryit.asp?filename=trycss_float)
<html>
<head>
<style type="text/css">
h1{
font-size:1em;
}
img
{
float:left;
}
.field{
width:100%
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<div class="content">
<h1>this is the title</h1>
<form>
<table width="100%">
<tr>
<td><input type="text" class="field"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
I know the structure is too complex for that simple form, but forms are automatically generated by a PHP script so I'd like to keep it that way.
Because you have a floated image taking horizontal space from the .content div is why you get the extended table. The .content div is not aware of the floated image width. You can offset this by placing a margin at least the width of the image on the .content div.
.content
{
margin-left: 95px;
}
fiddle
Try setting your <table> to display: block in the CSS and dropping the width="100%" attribute:
table {
display: block;
}
http://jsfiddle.net/ambiguous/dyxw7/
The above example includes a red border on the table so that you can see where it is, I also changed the image to a kitten to make sure it would show up.
The .content div is 100% of the page wide including the bit under the floated image so the input set at 100% is also going to be that wide, to make the .content div take up only the space that's left after the floating image you can add overflow: hidden to it, but then the input itself can use varying box models, so I would suggest using a width of 99% on it. If the content is not actually an input then maybe 100% will work for most elements ;)
e.g. x-browser-code
h1 {font-size:1em;}
table {border-collapse: collapse; width: 100%;}
table td {padding: 0;}
.content {overflow: hidden;}
form {padding: 0; margin: 0;}
img {float:left;}
.field {
width:99%;
margin: 0 auto;
}
I think you have to float your table along with your image and remove the width:100% on your table.
<div id="content">
<div id="side_bar" style="float:left;">image</div>
<div id="main_content" style="float:left;">table</div>
<div style="clear:left;"></div>
</div>
or the old way
<table>
<tr>
<td>image</td>
<td>table</td>
</tr>
</table>