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>
Related
I have a table that is of a responsive height and would like the image within it to fit the height of the td, but instead it overflows to the image source height, I have spent hours on this and no luck yet. The basic test case:
<table style='height:50%;width:50%;'>
<tr>
<td>
<img style='height:100%;' src='https://placehold.it/192x1200'>
</td>
</tr>
<tr>
<td>
bob
</td>
</tr>
</table>
use position relative to the parent of the image [ td ] and will apply your dimensions by precentage.
I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.
This is the HTML:
<table>
<tr>
<td>
</td>
<td>
<span>Truncated text goes here</span>
<i class="icn sprite icn-name></i>
</td>
<td>
</td>
</tr>
</table>
How do I do this? Using display: table; will make the HTML all buggy.
As said in comments, if you allow text and image to stay in adiacent cells, you can try the following.
<table>
<tr>
<td>Truncated text goes here</td>
<td><img src="imageURL" /></td>
</tr>
</table>
You can use vertical-align:top; in td style to align text on the top of the cell. And then you can use the following to set image width.
td>img {
vertical-align:top;
display:inline-block;
width:80px;
}
Fiddle
UPDATE
If you don't want to add extra cells to your table, you can create an internal div inside the cell, display it with display:table; property, and then display both span and img with display:table-cell; property.
Fiddle
I added the <i> element in front of the <span> element and gave the <i> element a float: right; and the <span> element the truncate styles.
Works fine now!
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;">
I have HTML Like Below. I have a table inside another table.Each TD in the inner table will contain a Scrollable Span defined with a CSS Class as below. The span will have scroll bars and scroll only if the width is defined as a value(like 100px).If I give Width as Auto the scroll bar does not appear and text simply overflows the TD and Table boundaries and spoils the layout. What I have to do is generate this dynamically(from ASP.NET Web Control). The inner table row can have many TDS. So each TD will be generated with a width as 100/#ofTDs %. And each TD will contain a scrollable Span. I cannot set the width on the span.I need it to be the same as the containing TD and scroll the rest by displaying a horizontal scroll bar. Any Ideas ??
.OuterTable
{
Color:Red;
width:120px;
white-space:nowrap;
}
.SpanClass
{
overflow:auto;
display:block;
width:auto;
color:Blue;
}
<table class="OuterTable">
<tr>
<td>Outer Table Column</td>
<td>
<table class="InnerTable">
<tr>
<td><span class="SpanClass"> This is A LINE IN Inner
table .this is the first line . Line 1 line1 jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</span></td>
</tr>
</table>
</td>
</tr>
</table>
First try: http://jsfiddle.net/zZDvq/
This is similar to what you want to create?
In the serverside code which generates the span, set the width as an inline style, i.e (pseudocode)
<span style = "width:100/#TDs %">
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