I have some text in table column which is greater than the column width I want. So text is overflowing from it. So I apply overflow:auto but in this case it is showing scroll on every page where data is less than the width of the column.
I don't want to show the scroll on that page where data is less than the width of column just want to show only where data is greater than its length.
Does any one have some suggestions?
<td style=" width:50%;overflow:auto;>
Try to wrap td content in div with fixed width and overflow: auto
For example:
<table>
<tr>
<td>some content</td>
<td> <!-- your fixed width column -->
<div style="width: 100px; overflow: scroll;">
Loremipsumdolorsitametconsectetuadipisicingelit
</div>
</td>
</tr>
</table>
use this <td style=" width:50%;overflow:scroll;">
This will insert horizontal and vertical scrollbars.
They will become active only if the content requires it.
Related
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
Is it possible to have a table that distributes the cell heights like the following?
______________________________________
| fixed height |
|____________________________________|
| |
| |
| dynamic height |
| |
|____________________________________|
| fixed height |
|____________________________________|
So the height of the first and the last cells are fixed, the center cell should be dynamic and scrollable.
Currently I have the following code but it doesn't work:
<table style="max-height:200px">
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto">
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
EDIT: it doesn't need to be a table it is just important that the center element has a dynamic height and is scrollable
EDIT: I know that I can specify the height of the element to be scrolled - then it works. But I want the height of the element to be dynamic
You might want this:
1) I gave height:auto to table, and here width:80% to table is optional.
2) The Div inside td is given height:60px;(just random to bring up scroll-bar), along with overflow:auto;.
3) The first and second td's have specific height:30px;
Check this out:
<table style="height:auto; width:80%;" border=1>
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto; height: 60px;">
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
Update : No Specific Height
Here in a update i used max-height
<table style="height:auto; width:75%; margin:0px auto;" border=1>
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto; max-height:100px;">
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
Note: If you want to use % for max-height give height and width equals 100% to your body.
I can't seem to find a way to do this without using Javascript.
Let's say I have a <table>, and I don't know the potential width of the content that populates the first column. The <table> has width:100% so that the rest of the columns can resize as neccssary, but I'd like to keep the first column with a fixed width so that it doesn't grow larger than the content.
Is this possible without Javascript?
<table>
<tr>
<th>Dynamic content column of unknown width</th>
<th>Some other column that is allowed to grow/shrink</th>
</tr>
<tr>
<td>Lorem ipsum ...</td>
<td>195383 ...</td>
</tr>
</table>
It seems that by setting the width of the dynamic content column to 1px, the column width will be fixed to the width of the content in the column, and still allow the other column to grow/shrink with the table.
To set a fixed width for the first column:
tr th:first-child, tr td:first-child {
width: 200px;
}
I have a HTML table
Required details are mentioned in JSFiddle.
This is working well on Firefox, but it's not on Chrome and IE!
what's wrong with them? why they expand the cell in the last row which has a fixed height, instead of second row which is the only cell with not-determined height in first column.
Here is the HTML code:
<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 100px; width: 176px; background:blue">
this is a fixed size cell
</td>
<td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td>
</tr>
<tr>
<td style="background:red">this should expand depending on gray region</td>
</tr>
<tr>
<td style="height: 46px; background:blue">this is a fixed size cell</td>
</tr>
seems like height algorithm for your case is underfind. You want td {height: auto} to extend all available space, but
A 'height' value of 'auto' for a 'table-row' means the row height used
for layout is MIN. MIN depends on cell box heights and cell box
alignment....In CSS 2.1, the height of a cell box is the minimum height required by the content
and finaly
CSS 2.1 does not specify how cells that span more than one row affect
row height calculations except that the sum of the row heights
involved must be great enough to encompass the cell spanning the rows.
see 17.5.3 Table height algorithms
I currently have:
<div class="generic-block-70">
<div class="generic-content-70">
<table id="voteBlock">
// stuff
</table>
</div>
</div>
However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.
Is there a way around this?
JSFiddle: http://jsfiddle.net/2vLEL/
Set overflow: auto; on your parent div.
http://jsfiddle.net/2vLEL/2/
.generic-content-70 {
overflow: auto;
}
I think I probably had a similar problem. This is how I solved it.
I have nested tables within tables.
Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell.
In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .
So, the html created from my javascript might look like this.
<table id="root">
<tr id="A">
<td id="1" style="width:200px">Content</td>
<td id="2" style="width:530px">
<div height="correct_height" overflowY="auto">
<table id="comments_table" style="width:510px table-layout:fixed">
<tr>
<td style="word-wrap:break-word">
<div style="width:480px;white-space:nowrap">Comments</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
.
.
.
</table>
The first <td id="1"> is created by a function that runs first.
The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row.
The widths are arranged as such to allow space for the vertical scroll bar to appear.
You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:
var correct_height = A.offsetHeight - 20;
The code depends on the intention:
If you want to lock the table to a height, give it a height: NNpx;
If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs