I have a table that displays text fetched from an API using JS and because of that a lot of my cells have different length. I've been trying to create a table with a vertical and horizontal scroll, which I managed to do but I can't seem to figure out how to adjust table row length so that entire text is shown, instead of being cut out. I would like for a cell to have a maximum length and if that length is exceeded the text is shown on the next line. This might not be doable with css only but any solution is welcomed.
Here is a quick look on my issue
Here is part of my CSS for the Match History Table
* {
box-sizing: border-box;
}
.table2 {
position: fixed;
top: 450px;
left: 400px;
border-collapse: collapse;
width: 1001px;
overflow-x: scroll;
display: block;
}
.table2 tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 300px;
}
.table2 td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
1st part of your issue is some cells needing longer lengths than others, so you could set the colspan for those longer than the others.
2nd part is by setting a max-width on those columns you can program how they behave when text is too long for the cells width. If you already know which column's cells will need more room, try adding a larger max width for those cells which will affect all cells in that column.
td:nth-child(1) {
width: 100px
}
td:nth-child(2) {
max-width: 400px; /* Comment this line to see the width stretch based on cell's
content */
}
I have included a working example of how you should set colspan and a modified version of your CSS here: https://codepen.io/TxsAdamWest/pen/NWbOwRW
I managed to fix my issue by adding a class with a min-width attribute to the headers that needed their length adjusted and as for the body, since it is generated dynamically using JS I did the same thing using cell.style.minWidth to a specific row.
Related
I have looked around alot but i cant figure out what is going on here.
So i have a table with 2 td's on the first row.
left td has a image and should be h:200px and w:200px.
right td has some text and should be h:200px and w:430px.
So the total should be w:630px and h:200px but somehow if i inspect the tr its h:200px and w:630.4px so 0.4 too many which i cant figure out where its from.
i have the margin and padding set to 0px.
#logo {
height: 200px;
width: 200px;
display: inline-block;
}
#headerText {
height: 200px;
width: 430px;
background-color: #660066;
display: inline-block;
}
picture with inspecter: https://imgur.com/d4nVbq9
You need to add both your HTML and CSS codes so that we can see the result and inspect it. But from your explanation, I would say there are two things to consider:
If you want to control the size of a cell, you need to wrap the content in a div or other block elements.
Try adding overflow: hidden; and white-space: nowrap;to your table cell. Use either one that works for you.
I'm trying to make a two column CSS table (tried HTML table too) with one row where the first column is one line of text and it expands to fit the content. The second column needs to be a single line of text that is right justified and expands left until it hits the first column and then becomes an ellipsis.
This first column is working with white-space: nowrap;. The second column is the issue:
When the content is longer than the second column max width, it will wrap. Once I add white-space: nowrap; it overflows and ignores the width, max-width and overflow: hidden;
Here is a JSFiddle showing what I'm getting vs. what I'm trying to get. Thanks!
https://jsfiddle.net/esodell1/oq59jkr3/10/
UPDATE
Thanks for the responses, but I found a way to accomplish this using flex box!
https://jsfiddle.net/esodell1/jdykzv5m/13/
So this is how the text-overflow technique works. There needs to be a defined width of it's parent or a closest parent. You'll need to defined a width for your cell such as:
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 85%;
text-align: right;
}
But you'll also have to limit your table since table naturally tries to expand as much as the content in its child requires by using table-layout:
.table {
display: table;
padding: 0.25rem;
table-layout: fixed;
width: 100%;
}
This will make the right column create the ellipsis when the cell reaches 85% of its available width. The problem you'll be faced with is dealing with the left column because you also have no-wrap set on it so that column might actually exceed 15% width and overlap with the right. The issue is both your column is trying not to wrap and fighting for table space, you'll need to apply the same text-overflow technique on the left column. See the the previous and last example here:
https://jsfiddle.net/bhL6sx0g/
To be honest if you're dealing with many columns with dynamic content like this that you don't want wrapping you might want to add a layer of JS on top to do some of your sizing for you else the best option is delegate the actual widths such as a 15/85 split and stick to it.
Edit:
Give width units in vw(viewport width). Notice changes in scss of table(width), first-child( width, min-width) and last-child(width, max-width).
This vw will behaved strangely in jsfiddle, try in .html only.
.table {
display: table;
padding: 0.25rem;
width:90vw;
.row {
display: table-row;
.cell {
display: table-cell;
border: 1px solid gray;
padding: 0.25rem;
&:first-child {
white-space: nowrap;
width:20vw;
min-width:20vw;
}
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 70vw;
max-width: 70vw;
text-align: right;
}
}
}
}
Previous
By max-width:100% it can stretch to take full size of parent. You need limit it to some percentage or pixels to achieve desired effect.
Removed width:100% as it was useless and changed max-width:200px
&:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 100%; */
max-width: 200px;
text-align: right;
}
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;
}
I would like to create a table with fixed header height (f.ex. 20px) and other rows height should be defined by percentage of the container (f.ex. 12%).
Row number varies from 4 to 6 and that is the cause that my table behaves in a wrong way. Height of header changes depending on the number of rows, despite it being defined in the css (min-height, height and max-height to be sure).
Here's a sample CSS:
#container
{
height: 800px;
}
#t1
{
border-collapse: collapse;
table-layout: fixed;
//height: 100%;
border: 1px solid black;
}
#head_row
{
height: 20px;
max-height: 20px;
min-height: 20px;
}
tbody tr
{
height: 12%;
max-height: 12%;
min-height: 12%;
}
tbody td
{
border: 1px solid black;
height: 12%;
max-height: 12%;
min-height: 12%;
}
Here is a sample JSfiddle of what I'm trying to achieve, but without setting table height to 100% it doesn't work and I commented it out.
jsfiddle here.
What did I forget or what am I doing wrong? Is there any way to do it using only HTML and CSS?
EDIT:
I'm trying to make a small calendar (I didn't write it earlier) and I just looked up how google does this:
Google calendar
They have header as one table and every row as a div with a one-row table inside it...
Well, I believe that people at Google know what they're doing, but is there really no simplier way?
Define your table height as follows.
height: 100%.
Which will refer Container height as you have defined. (min-height :800px; for Container div is more conventional so that Container div can grow in case of more data).
height: 800px;
If you remove Container height the table will shrink back to minimum required height.
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