<div id="container">
<div class="main_div">
<div class="cell1">1</div>
<div class="cell2">2</div>
<table>
<tr>
<td > The Tag </td>
<td> The Tag </td>
.....
more data
</tr>
</table>
</div>
</div>
</body>
</html>
Here the Table won't fit the container
when I try to do. How can achieve to fit
the table in "container tag? any idea?
css
#container{
margin:0 auto;
width:640px;
}
Table
width:900px;
/* how to fit shall I reduce the container to table width */ or no solution?
My container has the left and right side gap & when I include the table it look odd and not fit the container box ?
You can't have the table that's 900px fit in a container that's 640px. It's best to declare the width in one of them and have the other take on that width:
#container { width: 900px; }
table { width: 100%; }
huh? Why are you making the table bigger than the container if you want it to fit inside the container?
Try:
table
{
width:100%;
}
If that's not what you meant, you need to be more clear with your question because I'm really not understanding your thought process here.
Related
Here's code:
<div class="row">
<div class="large-12 columns">
<table class="scroll wide">
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Forth</td>
</tr>
</table>
</div>
</div>
CSS
.wide { width: 100%; }
Here's fiddle:
https://jsfiddle.net/emilcieslar/zc37ydys/
As you can see, there are 4 columns and scroll class that makes the table scrollable whenever the width of the page is smaller than the table width. However if I want to make the table width 100%, it stays the same, it doesn't stretch. I can see that the table tag itself is stretched, but the insides doesn't stretch. This is caused by table being display: block, however it has to be display: block, otherwise it won't be scrollable (on horizontal axis). How can I achieve 100% width table while still being responsive?
As they say, think out of the box, so I thought out of the table box and wrapped the table inside a container:
<div class="horizontal-scroll">
<table class="my-table"><!-- without scroll class now -->
...
</table>
</div><!-- /horizontal-scroll -->
with CSS:
.horizontal-scroll {
overflow: hidden;
overflow-x: auto;
clear: both;
width: 100%;
}
.my-table {
min-width: rem-calc(640);
}
Incredibly simple solution, but took me a while to realise it. It's important to set min-width for the table as table width is by default flexible therefore it will never scroll if you don't set min-width. It will result in a shrank table to the point it's not possible to shrink anymore.
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
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 need to do smth like this:
Left box should have static width and right one resizes to full browser width.
Height of the boxes also should be resizeable.
P.S.
Sorry guys, it took a while to make fiddle work.
So it is here
<div class="page-wrapper">
<div class="search-wrapper">
</div>
<div class="content-wrapper">
<div class="leftPage">
</div>
<div class="rightPage">
</div>
</div>
</div>
The problem is:
I have silver left page. I want it to have static width. Lets say 454px.
And I want right page (black one) to be dynamically resized to screen.
Variant with width 20%/80% is not good for me.
Is it possible with CSS only?
I got good answers with jquery/js but still interesting if it can be done with CSS only)
Sorry for troubles)
Javascript/jQuery
If you want left column to be static and the right column to be dynamic, you will need Javascript or a CSS preprocessor like SASS. That's the only real solution that is supported by older browsers.
// parent width - leftpage width = remainings
$('div.rightPage').width(
$('div.rightPage').parent().width() - $('div.leftPage').width()
);
Fluid layout
If you really want a pure-CSS solution, I suggest to use a fluid layout instead. This is cross-browser as well.
div.leftPage { width: 25%; }
div.rightPage { width: 75%; }
Simulated table
As alternative, you can still simulate a table layout using display: table. Tables do have that functionality. Check out the demo (resize the window to see it working)
This may not work in IE6 and IE7.
Native table
In the end, if you are OK with tables, you can use native tables, which are cross-browser ;)
CSS
table td.fixed { width: 200px; }
HTML
<table>
<tbody>
<tr>
<td class="fixed">
<p>Left content</p>
</td><td>
<p>Right content</p>
</td>
</tr>
</tbody>
</table>
Finally, in order to resize it vertically, you need to set resize: vertical.
div.leftpage, div.rightpage { resize: vertical; }
Using table is much easier.
HTML
<div class="page-wrapper">
<div class="search-wrapper">
</div>
<table class="content-wrapper">
<tr>
<td class="leftPage">LEFT</td>
<td class="rightPage">RIGHT</td>
</tr>
</table>
</div>
CSS
table
{
width:100%;
}
.leftPage
{
width: 454px;
}
Unless you really want to stick with DIVs?
Try using absolute position at a relative container and have your right div position at left the same amount of pixels as your left width. Like below:
div.content-wrapper {
height: 100%;
width: 100%;
position:relative;
}
div.leftPage {
background-color: black;
height: 100%;
width: 454px;
position:absolute;
}
div.rightPage {
background-color: red;
height: 100%;
width: 100%;
position:absolute;
left:454px;
}
Also its good to set the body height at 100% if you want your divs to expand across the page:
body, html {
width:100%;
height:100%;
}
And here's the demo: http://jsfiddle.net/XLLSA/1/
EDIT
I fixed the search div: http://jsfiddle.net/XLLSA/2/
Try this..
div.left {
width: 20%;
min-width: 200px;
}
div.right {
width: 80%;
}
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>