I have a table contained in a div.
table layout is fixed.
div has css property "overflow:scroll".
but when I change div's with less than table's width,
scroll bar did not appear
specify certain width, height to DIV and then overflow:auto;
overflow:auto;
width:500px;
height:400px;
check this code
<style type="text/css">
.pqr{
overflow:auto;
width:500px;
height:400px;
}
</style>
<div class="pqr">
<table width="600px" border="1">
<tr>
<td>
Test
</td>
</tr>
</table>
</div>
Related
Brand new to HTML/CSS and experimenting.
I'm trying to place a table between two hr tag lines (one on top, one on bottom). I want to have the width of the table match the width of the lines, center everything horizontally on the page, and have sticky positioning.
What's happening is, the lines follow the width I set, are centered, and have the positioning I want. The table has the positioning, but not the width and is left-aligned with the lines (not with the page or anything).
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
<hr>
<table style="border:1px solid black; background-color:Coral">
<tr>
<th><u>Section 1</u></th>
<th><u>Section 2</u></th>
<th><u>Section 3</u></th>
<th><u>Section 4</u></th>
<th><u>Section 5</u></th>
<th><u>Section 6</u></th>
</tr>
<tr style="text-align:center">
<td>Word<br/>Formatting</td>
<td>Lists</td>
<td>Tables</td>
<td>Images and<br/>Videos</td>
<td>Linking</td>
<td>Input Types<br/>(Text Boxes)</td>
</tr>
</table>
<hr>
</div>
Why would the table take the positioning from the div, but not the width or margin? Also, why would it left-align with the lines?
I know I can fix this by adding the width and margin to the table tag, but can it be fixed in the div tag? Or am I misunderstanding/missing something about how div tags work? I thought it would apply any styling to any elements between the tags.
Thanks so much for the help!
instead of :
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
do :
<div style="flex-direction: column;width:100%;display: flex;max-width: 800px;margin:auto;position:sticky;top:0px;">
A table will not consume 100% of the parents width by default. the width of the table will depend on the content by default. So just add width: 100%; to the table style and it will consume 100% of the parents width.
<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
<hr>
<table style="width: 100%; border:1px solid black; background-color:Coral">
<tr>
<th><u>Section 1</u></th>
<th><u>Section 2</u></th>
<th><u>Section 3</u></th>
<th><u>Section 4</u></th>
<th><u>Section 5</u></th>
<th><u>Section 6</u></th>
</tr>
<tr style="text-align:center">
<td>Word<br/>Formatting</td>
<td>Lists</td>
<td>Tables</td>
<td>Images and<br/>Videos</td>
<td>Linking</td>
<td>Input Types<br/>(Text Boxes)</td>
</tr>
</table>
<hr>
</div>
inline styles (set using style= are one-off definitions.
An inline CSS is used to apply a unique style to a single HTML element
https://www.w3schools.com/html/html_css.asp
if you want to reuse the same style multiple times, use css classes
<style>
.commonWidthAndMargin {
width:100%;
max-width: 800px;
margin:auto;
}
</style>
<div class="commonWidthAndMargin" style="position:sticky; top:0px; ">
<hr>
<table class="commonWidthAndMargin" style="border:1px solid black; background-color:Coral">
...etc
</table>
<hr>
</div>
Also, it's the default behavior of tables to not expand to their parent. A child div would take up 100% of its parent by default. see: link
I have a table within a table cell. The child table height must be aligned to parent cell height. I set height="100%" to the child table, but it's not working.
CSS
.outer{
border:1px solid black;
border-collapse:collapse;
}
.inner{
border:1px solid red;
height:100%;
width:auto;
}
HTML
<table class="outer">
<tr>
<td>
<!-- Content Here -->
</td>
<td>
<table class="inner">
<tr>
<td>
<!-- Content Here -->
</td>
</tr>
</table>
</td>
</tr>
</table>
Browser doesn't calculate height for table cells. At least there is no good cross-browser CSS solution for that. Relative and absolute positioning of parent TD will cause the table collapsing.
The solution might be to set the height fixed in pixels or calculate offsetHeight using JavaScript. Set style="height:100%;" to parent TD and id="inner" to child table.
Run the following JavaScript on page load:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style>
.outer{
border:1px solid black;
border-collapse:collapse;
}
.inner{
border:1px solid red;
height:100%;
width:auto;
}
</style>
</head>
<body>
<table class="outer">
<tr>
<td> asdf alsdf asldf<br/>asdf alsdf asldf<br/> asdf alsdf asldf<br/>
asdf alsdf asldf<br/>asdf alsdf asldf<br/>
</td>
<td style="height:100%;">
<table class="inner" id="inner">
<tr><td>inner content</td></tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var el = document.getElementById('inner');
el.style.height = el.parentNode.offsetHeight + 'px';
</script>
</body>
</html>
You can also bind this to window onresize event if needed.
My solution was to give the inner table a fixed height of 1px and set the height of the td in the inner table to 100%. Against all odds, it works fine, tested in IE, Chrome and FF!
Assign some width to the parent td with inner table. say width="100". Also add following CSS:
for outer class add position : relative;
for inner class add position:absolute; bottom:0; right:0; top:0;
also add display: block property to inner class
I need to create a table of the following characteristics:
________ 100% of the window width ________
| auto width | 860 px width, border | auto width, border
So in other words: a centered cell of 860px surrounded by one other cell on each side. The right cell also has to have a border set.
I can't come up with something friendly to all (even old IE6) browsers. The compatibility is important for me. I don't really care if it's table or a bunch of divs. Do you have any ideas?
Thanks
Sorry for this very quirksmode markup, but it looks like it does what you've described:
Edited: added table-layout:fixed for table and width="860" for the central td:
<style type="text/css">
table{ table-layout: fixed; }
.w860{ width:858px; }
.brdr{ border-style:dashed; border-width:1px; }
.td860{ background-color:#eee; }
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><div></div></td>
<td width="860" class="td860">
<div class="w860 brdr">
content
</div>
</td>
<td>
<div class="brdr"> also some content</div>
</td>
</tr>
</table>
Tested in FF, IE6+ (quirksmode and standards), Safari for windows.
<style>
table{
width:100%;
}
.auto{
width:auto;
}
.fixed{
width:860px;
}
.bordered{
border: 1px #ff0000 dashed;
}
</style>
<table>
<tr>
<td class="auto">11 </td>
<td class="fixed">111 </td>
<td class="auto bordered">111 </td>
</tr>
</table>
How do you make individual table columns fixed for a certain width so no matter how much text is in that column, the width of the column stays the same?
<col> tag is only good for firefox
table-layout:fixed is for whole table really
Just setting a width does not do it
what is the best css property to use for this
Below is code:
.video{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.audio{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.image{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.qid2{
overflow:hidden;
table-layout:fixed;
max-width:92px;
}
<table border=1 id="vidtbl">
<tr>
<th>Question No</th>
<th>Video</th>
<th>Audio</th>
<th>Image</th>
</tr>
<tr>
<td class="qid2"></td>
<td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
<td class="audio">hello</td>
<td class="image"></td>
</tr>
</table>
You can wrap the contents of the <td> in another tag with width and overflow:hidden. For example:
<table>
<tr>
<td class="fifty">
<p>Lorem ipsum dolor</p>
</td>
</td>
</table>
And the CSS:
.fifty p { overflow:hidden; width:50px; }
You can use width attribute in td tag
<td width="100px">
or you can use style attribute
<td style="width:100px">
or you can define it in css file
.tdstyle{
width:100px;
}
and specify the class in td tag
<td class="tdstyle">
If setting td's width to a fix value does not work for you:
<td width="100">..</td> or <td style="width:100px">...</td>
Wrapped the content to a div and set the overflow as hidden:
<td><div style="width:100px;overflow:hidden;">...</div></td>
Css class will be much efficient and easy to maintain though:
.col120 { width:120px; overflow:hidden;}
<td><div class="col120">content...</div></td>
try using
max-width:100px;
or
max-height:100px;
This will let your column expand maximum upto the width you set.
Can #parent div resize by #child div (*when #child div use position:absolute;)
just like #t_parent table is resize by #t_child table
<div id="parent" style="position:relative; width:500px; height:500px; border:#F00 3px solid;">
<div id="child" style="position:absolute; left:20px; width:800px; height:500px; border:#06F 3px solid;"></div>
</div>
<table id="t_parent" width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<table id="t_child" width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>TEXT</td>
</tr>
</table>
</td>
</tr>
</table>
If there is fixed width/height - no, you cant resize.
position absolute inside of position relative make the div detached from parent so you cant re-size.
But try remove position:absolute and give parent div display:table then you can re-size it.
Check this
http://jsfiddle.net/9gxyH/
First thing if you want the child div resize its parent div so there no need for position:absolute because we use position:absolute when we want that the element not effect other elements.
but if you want this functionality so you need to do a little bit of js.
check http://jsfiddle.net/sandeep/CLb5r/13/