I want to make table using divs. I nested divs in this manner:
<div class='table'>
<div class='row'>
<div class='cell'>
</div>
...
...
</div>
</div>
I change width of each div and not everything changes as expected.
Changing width of table div behaves just fine.
Table width set to 70%:
Table width set to 80%:
Changing width of row div does nothing.
Row width set to 70%:
Row width set to 100%:
Changing width of cell div behaves totally unexpected.
Cell width set to 30%:
Cell width set to 20%:
Cell width set to 7%:
I tried including position: relative, didn't change anything.
Relevant css code is:
.table{
}
.heading{
display: table-row;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
}
I change width of each class through Firefox's Dev tools.
Can you help me understand underlying logic?
Your table class needs css of:
display:table;
Additional Info:
Table Width: Changing the table width will make the entire table whatever size you specify, unless the content within is larger than what you've set it to. Cells will auto resize to fit the width.
Row Width: Does nothing. You aren't supposed to set a width on rows because they always take up 100% of the table width.
Cell Width: These need to always add up to 100% to work predictably. For example, if you have four cells per row, then you can set them to 25% width. Setting them all to 15% width doesn't make sense because 15*4=60... which leaves 40% unaccounted for.
You can, however, set a SINGLE cell's width to 15%, and then don't set any width for the remaining cells. At that point, the one you've set will always be 15%, and the rest will just take up the remaining space. Like this: http://jsfiddle.net/4g2Lavmy/4/
Add the class name "cell" to all the div's which are inside the div.table and use CSS like this:
div.cell{width:30%;}
Related
I'm trying to create a table that has a width of 100% of the parent container, and the td's each are sized automatically on screen size, which is all working fine.
Only the max-width property is ignored on the td. It is scaling to more than 150px. The min-width is working fine.
What am I doing wrong?
I have the following css:
table {
table-layout: fixed;
width: 100%;
}
td {
min-width: 60px;
max-width: 150px;
height: 40px;
}
Edit:
Working example: https://jsfiddle.net/7ez2hmy6/1/
We need an example to answer the right way :)
My guess : if the cell content is larger than 100px (whith a white-space: nowrap, for example), the navigator will still keep the width of the content.
Perhaps adding a overflow-x: scroll would resolve, but it would add a scrollbar when the length will be greater
https://developer.mozilla.org/fr/docs/Web/CSS/overflow-x
EDIT
With your example, I see one drawback: you ask the table to take 100% of width, but you have cells that should only take some width in it. So, the navigator has to take a choice between: must I take 100%, or just the sum of cells max-width?
The best I can do is to fix the width of the cells, and let a last one take the remaining space. Like this: https://jsfiddle.net/1rz8bksp/
each cell would take between 75 and 150px, as asked,
the remaining one will take... the remaining space.
Not very satisfying, but I don't see how to do elsewhere...
I am using flex property to display the progress of work in an office. I have multiple rows of data displaying. But the child div width is showing differently on each row depends on a number of children inside the parent div. How to show every time equal width for all same values ?
Thank you 04FS for the information on flex-grow and flex-shirnk to make zero. I have changed the CSS for my flex box and given the width of each column in %. This solved my issue
#parent
{
width: 750px;
display: flex;
}
.grow {
width: 100%;
text-align:center;
white-space:nowrap;
}
I am trying to display a list of records in a page. The issue that i am currently facing is, as i add new records to the list the page size increases and it adds a scrollbar. But i dont want the page to show results in the scrollbar, instead i want the scrollbar inside the grid table and fix the height of the whole container to the height of the div.
I do not want to fix the height of the div as it had few dependencies. I want to make the table of records not to expand as we add contents. I was able to achieve this by fixing the height by calculating vh and other containers on the page and setting the height of table container to 100%. But i want it to a way where we can only update the css without calculation. Like removing flex that allows it to grow etc
The table has 3 divs. A header for the table, table contents and footer. I want the scrollbar inside the header and footer , not on the web page that increases the height of the page as we add records
Expected Behavior
Current Behavior
I tried overflow-y to be scroll on the table div but of no luck.
Tried height 100%, flex-grow - 0.
Can someone point out to a simple css fix that might end up fixing this?
You may want to use css grid. Example:
<style>
.layout {
height: 100vh;
display: grid;
grid-template-rows: 50px 1fr 50px;
}
.header {
background: #ccc;
}
.content {
overflow: auto;
}
.footer {
background: #ddd;
}
</style>
HTML
<div class="layout">
<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
I have a set of forms on my webpage, they are dynamically generated and the width ends up being wider than the screen (this isn't a problem as it is designed to replace an exel spreadsheet with the same issue).
<body>
<div class='indented-form'>
<table>
... table elements here
</table>
</div>
</body>
css
body {
margin-right: 0;
padding: 0;
}
.indented-form {
margin: 10px;
}
I have "margin:10px" on the div that contains the table.
This adds a margin at the left of the page as I expect, but scrolling right, the table reaches the edge without any margin. (The div seems to be taking its width from the body, which in turn seems to be based on browser width.)
How do I make it include a margin at the right, even though the table is wider than the browser?
If you make your div an inline-block element, it will stretch to fit the table inside it:
.indented-form {
display:inline-block;
padding: 10px;
}
Example
I have a gridview that has some 20 columns and 1000 rows. The grid is placed under <div> tag. Due to such large figures, the div shows the vertical scrollbars, which is fine but it doesn't show the horizontal scrollbar.
The css written for div is as;
.divCSS{
display:block;
position:relative;
width: auto;
height: 5em;
margin:0;
padding:5px;
background:inherit;
color:inherit;
overflow:auto;
}
The entire <div> code is as below;
<div id="divGrid" align="left" style="border: solid 1px gray; width: 790px; height: 420px;" class="divCSS">
Despite giving overflow:auto, why i don't see a horizontal scrollbar?
If you have a fixed with and have set your overflow to auto then, to quote the W3C:
The behavior of the 'auto' value is user agent-dependent, but should
cause a scrolling mechanism to be provided for overflowing boxes.
In other words, your scroll behaviour may vary depending on the browser. Given you've defined both a fixed height and width, your browser will wrap your text so that it doesn't impact adjacent elements and does the minimum to ensure it merely supports a visible scrolling mechanism to display such that users could access the clipped content.
If you want to see the horizontal scroll bars, you need to include content length that cannot wrap and exceeds your specified element width, such as an image or by specifying white-space: nowrap on one of your contained elements (e.g. a paragraph).
Have a look at this example for an illustration of how it works.
Give the width of the div specific and set overflow-x:visible;
REmove
width: auto;
height: 5em;
from your divCSS class
and for scroll to apper you need content width more than 790px and hight more than 420px.
try
{
overflow-x:scroll;
overflow-y:scroll;
}