I have a table where I'm trying to set the width of the first column to 20%, and wrap the content of its cells in ellipsis. My goal is to keep the 20% width fixed regardless of screen size and length of cell content. However, when the content of the cell is long, the cell streches beyond 20%. I did try table-layout: fixed, but for some reason it caused the browser to completely ignore my column width instructions. I'm working with Chrome, here's a jsfiddle:
http://jsfiddle.net/07sktof2/7/
Thanks.
You need to set a td max-width:
table {
font-size: 14px;
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid black;
}
.first {
width: 20%;
padding-right: 20px;
}
.first .ellipsis {
width: 90%;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: nowrap;
}
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">
<span class="ellipsis">
data long long long long long long long long long long long long cell
</span>
</td>
<td class="second">data 2</td>
</tr>
<tr>
<td class="first">short</td>
<td class="second">data 2</td>
</tr>
</tbody>
</table>
Try it Online!
Related
I have done quite a bit or searching on this but could not find a solution for my specific case. I am a beginner to CSS and the solution is probably really simple, I just cannot find it. So I am trying to create a table that has some columns with long text. I am able to show ellipsis to cut off too long text, but I would like to have the column resize and the ellipsis be updated if I reduce the size of the window, that also reduces the size of the table itself. Now the cell width remains the same and a horizontal scroll bar is shown, which I want to prevent. I know using fixed width for the column is probably the problem, but it is the only way I am able to show the ellipsis in the first place, without fixed width no ellipsis is shown. Here is a very simplified piece of code and the css that easily shows the problem:
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>
first column
</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Any pointers are appreciated
One way to do this is to use #media query. Do something like this
.tableFixHead {
overflow: scroll;
height: 200px;
max-width: 50%;
}
.overflowTableText {
max-width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* add as many break points you want */
#media screen (max-width: 768px) {
.overflowTableText {
max-width: 200px;
}
}
#media screen (max-width: 576px) {
.overflowTableText {
max-width: 150px;
}
}
<div class="tableFixHead">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>first column</td>
<td>
<div class="overflowTableText">
the entire text that is way too long to show all at once
</div>
</td>
</tr>
</tbody>
</table>
</div>
After fiddling around a bit I found a solution that works with multiple columns with ellipsis:
<div class="tableFixHead">
<table width="100%">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100px">
first column
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
<td class="overflowTableText"><span>
the entire text that is way too long to show all at once the entire text that is way too long to show all at once</span>
</td>
</tr>
</tbody>
</table>
</div>
.tableFixHead {
overflow: scroll;
height: 200px;
border-collapse: separate;
width: 90%;
padding-right: 8px;
}
.overflowTableText {
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
Good day, Do you know bootstap? you can easily do that with bootsrap
https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables
A simple quick question, i have this HTML
<div id="list">
<table class="t">
<thead>
<tr>
<th class="w100"><div>ID</div></th>
<th><div>NAME</div></th>
<th class="w100"><div>EXTRA</div></th>
<th class="w100"><div>EXTRA1</div></th>
</tr>
</thead>
<tbody style="top: 0px;" page="0">
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
</tbody>
</table>
</div>
CSS
#list {
position: relative;
height: 200px;
overflow: auto;
}
.t {
height: 20000px;
overflow: auto;
width: 100%;
}
.t>tbody {
position: absolute;
border:solid 1px;
}
tr {
height: 20px;
width: 100%;
}
.w100 {
width: 100px;
}
how can I extend the NAME column to fill up the remaining space inside a position absolute tbody just like the thead does?
I need this css to remain like this:
.t>tbody {
position: absolute;
}
and the table must have a height so that I can scroll past the tbody content
everything else can be changed
here is a demo
https://jsfiddle.net/wyzixg/f3gqgjgj/5/
Can this be achieved by css and/or js/jquery?
I think that the following is what you need.
You were pretty close, except that the absolute positioning was confusing the auto sizing algorithm used in table layouts.
If you set the width of the table to 100%, then the table will resize the columns to fill up the space. Since you set the width of all columns (except the 2nd one for NAME) to 100px, any remaining width will be allocated to the 2nd column since its width will be auto.
Since you need the tbody element to be position: absolute, you can still get the auto table sizing effect by using display: table on tbody, which looks a bit bizarre but it might do the trick.
I am not sure if your JavaScript will work as expected, but the layout seems to be what you need.
There is an artifact, a second horizontal scroll bar, which can probably be removed with some experimentation, but I did not try it (yet).
body { margin: 0;}
.c-list {
position: absolute;
width: 99%;
height: 400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
border: 1px dotted blue;
}
table {
}
.t tbody {
position: absolute;
width: 100%;
display: table;
}
table td {
text-align: center;
border: solid 1px;
margin: 0;
padding: 0;
}
.w100, .wr100 {
width: 100px;
}
.wr100 {
text-align: right;
}
<div class="c-list">
<table class="t">
<tbody>
<tr>
<td class="w100">ID</td>
<td>NAME</td>
<td class="wr100">EXTRA</td>
<td class="w100">EXTRA1</td>
</tr>
<tr>
<td class="w100">1</td>
<td>1</td>
<td class="wr100">1</td>
<td class="w100">1</td>
</tr>
<tr>
<td class="w100">2</td>
<td>2</td>
<td class="wr100">2</td>
<td class="w100">2</td>
</tr>
<tr>
<td class="w100">3</td>
<td>3</td>
<td class="wr100">3</td>
<td class="w100">3</td>
</tr>
<tr>
<td class="w100">4</td>
<td>4</td>
<td class="wr100">4</td>
<td class="w100">4</td>
</tr>
<tr>
<td class="w100">5</td>
<td>5</td>
<td class="wr100">5</td>
<td class="w100">5</td>
</tr>
</tbody>
</table>
</div>
Use <thead> for table headers, along with <th>, so you can set the header width to 100% to fill the remaining space, and it will apply for the entire column.
Check this snippet for a better view of the result.
Also you don't really need the height for the table, and absolute.
.c-list {
position: absolute;
width:99%;
height:400px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
table td {
text-align: center;
border:solid 1px;
margin:0;
padding:0;
}
.t > tbody {
position: absolute;
width: 99%;
}
table {
width:100%;
}
table tr{
width:100%;
}
table tbody {
width:100%;
}
.w100 {
width:100px;
}
.wr100 {
width:100px;
text-align: right;
}
<div class="c-list" >
<table style="height: 2000px;" class="t">
<tbody style="top: 0px;" page="0">
<tr><td class="w100">ID</td><td>NAME</td><td class="wr100">EXTRA</td><td class="w100">EXTRA1</td></tr>
<tr><td class="w100">1</td><td>1</td><td class="wr100">1</td><td class="w100">1</td></tr>
<tr><td class="w100">2</td><td>2</td><td class="wr100">2</td><td class="w100">2</td></tr>
<tr><td class="w100">3</td><td>3</td><td class="wr100">3</td><td class="w100">3</td></tr>
<tr><td class="w100">4</td><td>4</td><td class="wr100">4</td><td class="w100">4</td></tr>
<tr><td class="w100">5</td><td>5</td><td class="wr100">5</td><td class="w100">5</td></tr>
</tbody>
</table>
</div>
I have a trouble with x-scroll table, when I try to resize window to small size. I have the same table (with same css) which doesn't contain row with images and it works great.
HTML:
<div class="price_wrapper">
<table class="price">
<thead>
<tr class="head">
<th>Название</th>
<th>Вольерная 1</th>
<th>Вольерная 2</th>
<th>Вольерная 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Схема</td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer1.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer2.jpg" alt=""></td>
<td><img src="http://king-bitovki.ru/static/pub/img/products/budki/volyer3.jpg" alt=""></td>
</tr>
<tr>
<td>Ширина</td>
<td>90</td>
<td>120</td>
<td>150</td>
</tr>
<tr>
<td>Высота</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td>Глубина</td>
<td>60</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>Лаз</td>
<td>30x35</td>
<td>39x42</td>
<td>42x53</td>
</tr>
<tr>
<td>Стоимость, руб.</td>
<td>7 000</td>
<td>9 000</td>
<td>11 000</td>
</tr>
</tbody>
</table>
</div>
CSS:
.price_wrapper {
overflow-x: scroll;
overflow-y: auto;
min-width: 400px;
width: 100%;
}
table.price {
border-collapse: collapse;
background-color: #FFF;
}
table.price th,
table.price td {
border: solid 1px #999;
padding: 5px;
}
table.price img {
max-width: 180px;
width: 100%;
height: auto;
}
JSFiddle: https://jsfiddle.net/vasromand/gue888vp/
Why is it?
You must use width for the scroll to
work.price_wrapper {
overflow-x: autol;
overflow-y: auto;
max-width: 400px;
width: 100%;
}
And dont use scroll because it will not be working in ie so instead you can use auto for it and set max-width or width to enable the auto scroll
Your content is not overflowing, you're using the width 90% of its container.. there never will be an overflow to scroll..
800px Content
table.price {
width: 800px;
margin: 10px 5%;
border-collapse: collapse;
background-color: #FFF;
}
400px container
.price_wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 400px;
}
This will force the content to be wider than the wrapper.. which has the overflow-x
Also as correctly suggested by the other answer, use overflow:auto
Here is an updated version which will FORCE overflow to show you an example..
JSFiddle
As you can see i have forced the child to be wider than its parent.. Therefore offering scroll.
I have a fixed-width table of 400px with 3 columns.
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td><td class="narrow">Small1</td><td class="narrow">Small2</td></tr>
</tbody>
</table>
Here is the CSS.
table
{
table-layout: fixed;
width: 400px;
}
td
{
border: 1px solid #000;
white-space: nowrap;
}
td.wide
{
overflow: hidden;
text-overflow: ellipsis;
}
td.narrow
{
}
Here is the JSFiddle.
Currently, each of the 3 columns takes up 1/3 of the space. What I want is for the 2nd and 3rd columns to be as small as possible (without anything hidden or text-wrapped) and have the 1st column take up the remainder of the space (with any text that doesn't fit being hidden).
Depending on the data displayed, the 2nd and 3rd columns may need to be wider or narrower to fit their content, so I don't want to define a fixed size for any column.
Is this possible?
Here is the only solution i found. It's pretty ugly but it does the trick :
http://jsfiddle.net/XA9kY/
The thing is to wrap the string to be overflowing into a .... table
Notice the table into the td.wide
<div style="width:400px; border: 1px solid red;">
<table>
<tbody>
<tr>
<td class="wide">
<table>
<tr>
<td>This is really really long and as much as possible should show but should eventually be cut off.
</td>
</tr>
</table>
</td>
<td class="narrow">Small1</td>
<td class="narrow">Small2</td>
</tr>
</tbody>
</table>
</div>
And here is the magic
td.wide table
{
width: 100%;
table-layout: fixed;
}
td.wide table td
{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Just wrapping the string into a table with table-layout: fixed; property does the trick.
Here's my try at this: (Example)
<table>
<tbody>
<tr>
<td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td>
<td class="rest">Small1</td>
<td class="rest">Small2</td>
</tr>
</tbody>
</table>
CSS
table {
width: 400px;
}
table td {
border: 1px solid #000;
}
td.rest {
width:1px;
}
The only thing is that it doesn't like:
overflow: hidden;
text-overflow: ellipsis;
If that isn't an issue then this should work.
EDIT
A possible solution to hide the text in the wider cell by just setting the height.
Added also the line-height for all the cells so you can change both based on the settings you're after.
Here the (Example)
table {
width: 400px;
}
table td {
border: 1px solid #000;
line-height:26px;
}
td.rest {
width:1px;
white-space: nowrap;
}
td.wide {
overflow:hidden;
height:26px;
display:block;
}
I've got a table cell that I would always like to be a particular width. However, it doesn't work with large strings of unspaced text. Here's a test case:
td {
border: solid green 1px;
width: 200px;
overflow: hidden;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
How do I get the text to be cut off at the edge of the box, rather than having the box expand?
Here is the same problem.
You need to set table-layout:fixed and a suitable width on the table element, as well as overflow:hidden and white-space: nowrap on the table cells.
Examples
Fixed width columns
The width of the table has to be the same (or smaller) than the fixed width cell(s).
With one fixed width column:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 100px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
With multiple fixed width columns:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
max-width: 200px;
}
td {
background: #F00;
padding: 20px;
overflow: hidden;
white-space: nowrap;
width: 100px;
border: solid 1px #000;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
Fixed and fluid width columns
A width for the table must be set, but any extra width is simply taken by the fluid cell(s).
With multiple columns, fixed width and fluid width:
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td {
background: #F00;
padding: 20px;
border: solid 1px #000;
}
tr td:first-child {
overflow: hidden;
white-space: nowrap;
width: 100px;
}
<table>
<tbody>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
<tr>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
<td>
This_is_a_terrible_example_of_thinking_outside_the_box.
</td>
</tr>
</tbody>
</table>
That's just the way TD's are. I believe It may be because the TD element's 'display' property is inherently set to 'table-cell' rather than 'block'.
In your case, the alternative may be to wrap the contents of the TD in a DIV and apply width and overflow to the DIV.
<td style="border: solid green 1px; width:200px;">
<div style="width:200px; overflow:hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
</td>
There may be some padding or cellpadding issues to deal with, and you're better off removing the inline styles and using external css instead, but this should be a start.
Apply CSS table-layout:fixed; (and sometimes width:<any px or %>) to the TABLE and white-space: nowrap; overflow: hidden; style on TD. Then set CSS widths on the correct cell or column elements.
Significantly, fixed-layout table column widths are determined by the cell widths in the first row of the table. If there are TH elements in the first row, and widths are applied to TD (and not TH), then the width only applies to the contents of the TD (white-space and overflow may be ignored); the table columns will distribute evenly regardless of the set TD width (because there are no widths specified [on TH in the first row]) and the columns will have [calculated] equal widths; the table will not recalculate the column width based on TD width in subsequent rows. Set the width on the first cell elements the table will encounter.
Alternatively, and the safest way to set column widths is to use <COLGROUP> and <COL> tags in the table with the CSS width set on each fixed width COL. Cell width related CSS plays nicer when the table knows the column widths in advance.
I'm not familiar with the specific issue, but you could stick a div, etc inside the td and set overflow on that.
Best solution is to put a div into table cell with zero width.
Tbody table cells will inherit their widths from widths defined the thead.
Position:relative and negative margin should do the trick!
Here is a screenshot:
https://flic.kr/p/nvRs4j
<body>
<!-- SOME CSS -->
<style>
.cropped-table-cells,
.cropped-table-cells tr td {
margin:0px;
padding:0px;
border-collapse:collapse;
}
.cropped-table-cells tr td {
border:1px solid lightgray;
padding:3px 5px 3px 5px;
}
.no-overflow {
display:inline-block;
white-space:nowrap;
position:relative; /* must be relative */
width:100%; /* fit to table cell width */
margin-right:-1000px; /* technically this is a less than zero width object */
overflow:hidden;
}
</style>
<!-- CROPPED TABLE BODIES -->
<table class="cropped-table-cells">
<thead>
<tr>
<td style="width:100px;" width="100"><span>ORDER<span></td>
<td style="width:100px;" width="100"><span>NAME<span></td>
<td style="width:200px;" width="200"><span>EMAIL</span></td>
</tr>
</thead>
<tbody>
<tr>
<td><span class="no-overflow">123</span></td>
<td><span class="no-overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td>
<td><span class="no-overflow">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td>
</tbody>
</table>
</body>
Well here is a solution for you but I don't really understand why it works:
<html><body>
<div style="width: 200px; border: 1px solid red;">Test</div>
<div style="width: 200px; border: 1px solid blue; overflow: hidden; height: 1.5em;">My hovercraft is full of eels. These pretzels are making me thirsty.</div>
<div style="width: 200px; border: 1px solid yellow; overflow: hidden; height: 1.5em;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div>
<table style="border: 2px solid black; border-collapse: collapse; width: 200px;"><tr>
<td style="width:200px; border: 1px solid green; overflow: hidden; height: 1.5em;"><div style="width: 200px; border: 1px solid yellow; overflow: hidden;">
This_is_a_terrible_example_of_thinking_outside_the_box.
</div></td>
</tr></table>
</body></html>
Namely, wrapping the cell contents in a div.
Easiest and simplest solution that works:
table { table-layout: fixed }
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
You'll have to set the table's style attributes: width and table-layout: fixed; to let the 'overflow: hidden;' attribute work properly.
Imo this works better then using divs with the width style attribute, especially when using it for dynamic resizing calculations, the table will have a simpler DOM which makes manipulation easier because corrections for padding and margin are not required
As an extra, you don't have to set the width for all cells but only for the cells in the first row.
Like this:
<table style="width:0px;table-layout:fixed">
<tr>
<td style="width:60px;">
Id
</td>
<td style="width:100px;">
Name
</td>
<td style="width:160px;overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
<tr>
<td style="">
Id
</td>
<td style="">
Name
</td>
<td style="overflow:hidden">
VeryLongTextWhichShouldBeKindOfTruncated
</td>
</tr>
</table>
I've just had a similar problem, and had to use the <div> inside the <td> at first (John MacIntyre's solution didn't work for me for various reasons).
Note though that <td><div>...</div></td> isn't valid placement for a div so instead I'm using a <span> with display:block; set. It validates fine now and works.
<style>
.col {display:table-cell;max-width:50px;width:50px;overflow:hidden;white-space: nowrap;}
</style>
<table>
<tr>
<td class="col">123456789123456789</td>
</tr>
</table>
displays 123456
to make more simple
i propose to put an textarea inside the td
wich is manage automaticly the overflow
<td><textarea autofocus>$post_title</textarea></td>
need to be ameliorate