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
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 div inside a td element. The div is resizable and it has overflow scroll. The problem is that the div resizes when I use JQuery to change the contents of the div. What I want is for the div to stay the same size when its contents change. Can someone tell me how to do this?
<table>
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both; min-height:300px;min-width: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
<script>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
</script>
You need to set width to either Parent Element i.e., table or child element which you don't want to increase width. i.e, div.
I added width to parent element so that all child elements can control with that.
CODE:
#table{
width:165px;
}
<table id="table">
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both;min-height: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
JSFIDDLE
NOTE: change width according to your requirement.
You need add the width to the div
<div id="mydiv" style="border: 1px solid black; overflow:scroll;
resize: both; width:300px min-height:300px;"></div>
Perhaps it is because you have 2 min-heights. You need a max-height
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.
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>