When I display the data on the table, it causes the table to resize. Please help me.
It depends on the need, one way is to use css and overflow: hidden; and it can be perfectly seen on this page of Stack Overflow, where long lines of code do not break page but the overflow is clipped, and the rest of the content will be invisible.
Example:
<tr>
<td>verylongtexthere</td>
<td>verylongtexthere</td>
</tr>
css:
td { width: 200px; overflow: hidden; }
table { width : 400px; table-layout: fixed; }
https://jsfiddle.net/j6cyv0wz/
Related
So I'm trying to create a React component library that has the features as its jQuery plugin counterpart
, I'm almost done with the creation of the library but the scrolling feature is one that I strangely cannot implement correctly, here's what it should look like this:
I used two different methods in order to achieve this particular effect
I applied the following CSS properties to the <tbody> :
.DataTable__body {
display: block;
height: 250px; /* If the dev. chose a height of 250 pixels */
width: 100%;
overflow-y: scroll;
}
The <tbody> has now scrolling but my <table> has a lot of columns, it will only take up the width of the content in the first row like this:
I set the same CSS properties to the <table>:
.DataTable {
/* Properties to make the scrolling effect */
display: block;
overflow-y: scroll;
width: 100%;
/* Table properties */
height: 50px;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
But it doesn't work and actually kinda broke the table:
If anyone could help me solve this issue, I would greatly appreciate it.
Also, here's the CodePen reproducing the first effect:
https://codepen.io/phenix47/pen/zYJxxQj
I'm trying to build a scrollable table, so I put my table inside a div(#tableScroll) and add this CSS to the table wrapper div.
#tableScroll {
max-height: 320px;
overflow: auto;
}
Here my HTML page screenshot.
But I'm getting an extra space please look the screenshot.
then I inspect the element and find that table tbody height is responsible for this extra space.
Please see the inspect screenshot
Please give me your thought / Idea, It will be very helpful to me.
just replace #tableScroll by class .table-responsive.
<div class="m-b-5">
<div class="table-responsive">
Try changing it to overflow: scroll; instead, auto just lets the browser decide
#tableScroll {
max-height: 320px;
overflow: scroll;
height: 320px;
display: block;
}
I see the id for the table is bulkTableif you need that height for your tableScroll is one thing and another thing is to give to the bulkTable a horizontal scroll, for that you just should use in your CSS overflow-x: auto
#bulkTable {
overflow-x: auto; }
I hope it can help you :D
I'm building a list by using a table:
As you can see, the long url, makes the table wider. This is what I want to prevent.
I've used a couple of things like
table { table-layout: fixed; width: 100%; }
and
td.title { white-space:nowrap;overflow: hidden; width: 200px; }
But this did not work.
Also, maybe I need to note that my table is dynamically being made. But this should not be a problem.
Any suggestions?
Just cut the url text (not the href value) at a certain character. With JavaScript you can do that with str.substring(5, 0); where 5 is the number of characters you want left.
This is default behaviour of a table cell. It will always stretch to fit the content's dimensions. width on a table cell tends to behave more like min-width
The fix is to not style the td, but instead its contents only.
Try something like:
td.title a {
display: inline-block;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
This question has been asked several times, but none of the answers provided seem to help me:
See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/
I have a "dynamic" (percentage based) layout with two columns.
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
In each of these columns I have a table that is supposed to use the full column width.
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.
Requirements:
Needs to be percentage based. I can't set absolute sizes.
Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
Must work in Chrome, Firefox and Internet Explorer 8+
Can't display tables below each other as it has to fit onto one sheet of paper when printing.
What I tried:
inside of and use width and overflow on that. Changed nothing.
"display: table;" on containing div - instead of having two columns the tables were displayed below each other
"table-layout: fixed;" - Forced all columns to have same width
I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
Zero-width spaces in content - didn't change anything, probably due to white-space: nowrap;
Related Questions:
Table width exceeds container's width
How do I prevent my HTML table from stretching
HTML CSS How to stop a table cell from expanding
Table Overflowing Outside of Div
you need to add the table-layout property:
table-layout: fixed;
also include width=100% in the table HTML tag, not just the style tag.
http://jsfiddle.net/reeK5/
Maybe you'll be interested in a max-width: 0; hack I've discovered.
It has some limits, we should use CSS tables instead of HTML, but it works:
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
http://jsfiddle.net/CyberAP/NUHTk/103/
.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}
<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>
Measurements on tables work differently. In general, width on a table cell is handled as min-width.
One solution, if you don't mind adding extra markup, is to put a div inside each table cell in which you put the content. Then give this div a width, or a max-width. So
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
becomes
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
and so on.
See updated fiddle: http://jsfiddle.net/bsQNj/4/
Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.
In your CSS:
table {
table-layout: auto;
width: 100%;
}
That should cover all tables
If I have a table like this very very simple example:
table {
table-layout:fixed;
width:300px;
}
.td1 {
width:100px;
}
.td2 {
width:200px;
}
and in one of my .td2 contains an image that is, lets say, 300px in width. I would like to show scroll bars to allow users to scroll to see it all. However I don't think this is possible, is it?
So my questions are:
Are there any other options apart from hidden for handling overflow in tables?
Is it possible to show scroll-bars only when content pushes beyond a set width? (I swear I've seen it in some forum software but I can't remember which one)
What about
overflow: auto
Content is clipped and scrolling is
added only when necessary.
Put the image inside a div in the table cell and make the width and height of the div to be 100% of the td and style it to overflow: auto
<style>
.test { width: 100%; height: 100%; overflow: auto; }
</style>
<td>
<div class="test">
your image
</div>
</td>