I am trying to create a scrollable panel within a table cell.
What I would like is for the div to be as wide as the table cell and then render scrollbars for the content.
When I try the following the div sets its width to 100% of the contained span tag not the cell
<table cellpadding="3" width="90%" align="center" border="0">
<tr>
<td>
<div style="border: solid 1px red; height: 10px; width: 100%; overflow: auto;">
<span style="width: 2000px;">a</span>
</div>
</td>
</tr>
</table>
I was under the impressing that width=100% should size on parent not on child?
Any ideas?
An empty table cell has no width, the span is the one that's forcing the width of the cell. That's why the div width is equal to the cell width.
I tried it within a containing div instead of a table and it works fine.
I assume that the inner span width is causing the td width to be 2000px
Related
<td style="padding: 8px;">
test
</td>
I'm trying to make a clickable table cell, using display: block on an anchor fills the width of a td, but height is still not filled - the anchor has the height of test text, not the td height with padding.
How can I do this?
Remove padding from td and add padding to
test
try this
<td style="height: 100%;">
test
</td>
set height to td and set padding to a
<table><tr>
<td style="border:thin black solid; background:gray;">
test
</td></tr></table>
Remove padding from td and give it to a tag.
Hope this helps.
I have dynamic text content inside all first tds. So the trs and tds get expanded automatically. Now for all second tds there is div with background image and dont have any text inside. I need this divs with background image to be expanded or collapsed automatically along with the cells in table so that the red image will span over the height of each cell. Any way to do this purely with css as I dont want to introduce script here? jsfiddle
<table border="1">
<tr>
<td>
This content makes the trs and tds to expand/contract horizontally automatically
</td>
<td>
<div class="img"></div>
</td>
</tr>
<tr>
<td>
xyz
</td>
<td>
All divs inside second tds should get expanded automatically which is not happening
</td>
</tr>
</table>
CSS
td
{
width:200px
}
.img{
width:30px;
height:40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;}
Just set background for that td with 100% width and height.
Fiddle: http://jsfiddle.net/mttSA/
.empty{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAXCAIAAABmo+ONAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAApSURBVDhPY3gro0IG+v///6hOvGhUJyE0qpMQGtVJCFGmE4jJAf//AwBnlUxAq2HzYQAAAABJRU5ErkJggg==) no-repeat;
background-size: 100% 100%;
}
HTML:
<td class="empty">
</td>
I am trying to give min width to table cells using col element of colgroup. The table is wrapped by a div which has some width set(less than combined width of all cells set in col) and overflow of div is set to auto.
Here is my html code -
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.table-block {
border-spacing: 0;
border-collapse: collapse;
}
.cell {
padding: 5px 10px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div style="width:200px;overflow: auto">
<table class="table-block">
<colgroup>
<col style="width:300px">
<col style="width:300px">
</colgroup>
<tbody>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
<tr>
<td class="cell"><em>2(0,2)</em></td>
<td class="cell"><em>3(0,3)</em></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
My problem is cells doesn't take width from col. It is trying to fit themselves in the wrapper div. I want that the cells take the proper width given and a scrollbar should appear. I have a solution that I set table width set to the total width I need. This would require me to update table width every time I insert new column by JavaScript.
My Solution -
<div style="width:200px;overflow: auto">
<table class="table-block" style="width:600px">
<!-- table things -->
</div>
Is it a right thing to do? And why it happens?
jsFiddle link
I think the problem here is that ultimately the table defaults to 100% width of the container, and its inner elements are unable to surpass this without their content forcing it to do so. The same happens when attempting to give a tr or td a width greater than the table's own.
Your fix is pretty much the way I'd do it. The only change I'd make is:
<div style" ... overflow-x:scroll; overflow-y:hidden;">
This way a scroll bar won't appear down the side on older versions of IE.
This of course assumes that you only want your table to scroll horizontally.
I want to accomplish the following using only CSS and HTML, and not use JavaScript.
I have a simple HTML table that looks like this. Both columns contain dynamic content, but the left has a scrollable div. I want the display height of that scrollable div to size according to the table, and have the table size be set only by the dynamic height of column2.
<table>
<tr>
<td class="column1">
<div>
...
</div>
</td>
<td class="column2">
<div>
...
</div>
</td>
</tr>
</table>
I want the table to adjust its height according to dynamic content in column2 only, not column1, so that I can have a scrollable div in column1 that sizes to the height of the table set by column2 automatically when the page is rendered.
I have found solutions using jQuery, but the performance is very poor when I use height() or outerHeight() to find the height of the right column and set the div inside the left column appropriately, especially when the right column contains a large number of HTML elements which are in their own scrollable divs.
You can use absolute positioning:
table {
position: relative;
}
td {
background: red;
width:200px;
}
.column1>div {
height:100%;
overflow: auto;
position: absolute;
top:0;
width:200px;
}
<link rel="stylesheet" href="del.css">
<table>
<tr>
<td class="column1">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
</div>
</td>
<td class="column2">
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>Text
</div>
</td>
</tr>
</table>
Also available as a jsfiddle.
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">