I'm trying to create an HTML table where the column widths are changed dynamically, and in case the table width becomes larger than the container, a horizontal scrollbar appears.
However, I can't seem to get this to work - when I set the container width, it acts as an upper bound for the table and even though I set a column's width explicitly (either using CSS or Jquery) the table refuses to display the correct width. Even when I set "overflow: scroll", the scrollbar never becomes active.
The table width should also decrease when the column widths become smaller, which is why I can't use table width = 100%.
Note: I know this issue can be bypassed if I explicitly set the table width (e.g. table width=500px) every time a column width changes. I am hoping there is a more elegant solution...
Here is the code:
JFiddle: http://jsfiddle.net/sangil/NdY22/
HTML
<div class="container">
<table>
<thead>
<tr>
<th class="a">th 1</th>
<th>th 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>td 1</td>
<td>td 2</td>
</tr>
</tbody>
</table>
</div>
CSS
table {
table-layout: fixed;
border: 1px solid black;
border-collapse: collapse;
}
table td {
border: 1px solid black;
}
table th {
border: 1px solid black;
background-color: lightsteelblue;
}
.container{
border: 1px solid lightsteelblue;
width: 300px;
overflow: auto;
}
JS
$(function() {
$('.a').width(500);
});
Not sure if I understood your question correctly. If you are after scrollbars in table then you can simple do that by using display: block on .a class:
.a {
width: 400px;
display:block;
}
Working DEMO
EDIT:
<div STYLE=" height: 100px; width: 100px; font-size: 12px; overflow: auto;">
<table bgcolor="green">
<tr><td bgcolor="blue">testing </td></tr>
<tr><td>free php scripts;/td></tr>
<tr><td bgcolor="blue">free php scripts</td></tr>
<tr><td>free php scripts</td></tr>
<tr><td bgcolor="blue">free php scripts</td></tr>
</table>
</div>
see reference
Related
This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 3 years ago.
Currently
I have a table row that contains a textarea for user input. The purpose of textarea is so user can input multiple lines.
Code:
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body>
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container">
<textarea class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsfiddle.net/to45asgy/1/
Problem
I would like the textarea to show all content by auto-adjusting height rather than requiring the user to scroll.
Notes:
I saw a solution on Creating a textarea with auto-resize, but there has to be a simpler solution through CSS that I am missing.
I used to use an editable rather than before, but because I am using this html within a react component, there were other complications with using an editable so I switched to a . I wanted to know if there is a solution, but appreciate it if there is not, and will then refactor the code to use once more.
EDIT: Seems there is no CSS only solution for :'(
It will hide scroll and set size for content text
function autoheight(element) {
var el = document.getElementById(element);
el.style.height = "5px";
el.style.height = (el.scrollHeight)+"px";
}
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
}
th, td {
text-align: center;
border: 1px solid black;
padding: 10px;
}
.container {
border: 1px solid blue;
}
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
overflow:hidden;
min-height:100%;
}
.fixed-min {
min-width: 600px;
}
<!DOCTYPE html>
<html>
<body onload="autoheight('ta')">
<table>
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>
<div class="container fixed-min">
<textarea class="text-area">Set width in this big column
</textarea>
</div>
</td>
<td>
<div class="container" >
<textarea id="ta" onkeyup="autoheight('ta')" class="text-area">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</textarea>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You can make it a div and apply "contenteditable" = true.
Updated fiddle at : "https://jsfiddle.net/hbnr2yk6/"
Relevant changes required are:
<div class="text-area" contenteditable="true">This contents of this column should always be visible i.e. no scroll bar, and instead the height of this row should adjust to show all content.
</div>
.text-area {
width: 100%;
box-sizing: border-box;
display: flex;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
**************************** javascript solution ***********
Possible solution to fix the problem with textarea would be to use javascript. I have updated the fiddle at "https://jsfiddle.net/uqr98jf4/". In table column 1 there is textrea solution and table column 2 there is div solution. See if any one of it solves your problem.
I always use this library
autosize(document.querySelector('textarea'));
Demo
Please add row textarea rows and columns and columns to textarea
and add overflow: hidden or auto.
To remove the scrollbar you can use overflow: auto; or overflow: hidden;.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
overflow: auto; will automatically create a scrollbar if the text area becomes too overloaded with text.
CSS isn't going to be able to read the content within the textarea tag to dynamically resize the textarea tag.
Is it possible to have a table with width 100% (so the table fits the screen size), where the first and the last column have a fixed width, and the columns between take the rest, both 50%.
Like:
+--------------------+--------------------------------------+--------------------------------------+------------+
| width:300px; | with dynamic, equals next column | width dynamic, equals prevous column | width:50px;|
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
+--------------------+--------------------------------------+--------------------------------------+------------+
Try this:
As you can see the two centre column remain equal sized, due to the table-layout:fixed, even when the content is of different length. Try adding more and less content to the two centre columns.
JSFiddle: http://jsfiddle.net/RtXSh/
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}
td {
border: 1px solid #333;
}
HTML
<table>
<tr>
<td style="width:300px;">
test
</td>
<td>
test test tes test test
</td>
<td>
test
</td>
<td style="width:50px;">
test
</td>
</tr>
</table>
Try using the pseudo element first-child and last-child
If I'm not mistaken the other columns will align equally by themselves. You might need to use the !important statement behind the first-child and last-child widths.
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
td:first-child{ width: 100px; }
td:last-child{ width: 100px; }
<table>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</table>
However, as nurettin pointed out, if you use a thead and tbody section you have to style the header. Styling the td:first-child and td:last-child will not work.
table{ table-layout: fixed; width: 100%; }
td { border: 1px solid black; }
th:first-child{ width: 100px; }
th:last-child{ width: 100px; }
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>100px</td>
<td>some text</td>
<td>some text</td>
<td>100px</td>
</tr>
</tbody>
</table>
In my opinion, the simple, nice and easy way is that don't use the px and % together. If you are using table width 100%, then define width of first and last column in % as well. If you are interested in that, here is how you can do:
CSS:
.mytable {
width:100%;
border: 1px solid green;
}
.left{
width:30%;
border-right:1px dashed blue;
}
.mid1{
width:30%;
border-right:1px dashed blue;
}
.mid2{
width:30%;
border-right:1px dashed blue;
}
.right{
width: 10%;
border-left:1px dashed blue;
}
HTML:
<table class="mytable">
<tr>
<td class="left">Left Column, 30%</td>
<td class="mid1">Mid 1, 30% </td>
<td class="mid2">Mid 2, 30% </td>
<td class="right">Right, 10%</td>
</tr>
</table>
This can be handled by adding the style table-layout:fixed to the table element, and simply not specifying any width value for the columns you wish to evenly divide the width remaining after the fixed columns have been accounted for.
Further, using combinations of <colgroup> can provide robust variable-width scenarios.
I've created an example at JSFiddle: https://jsfiddle.net/3bgsfnuL/1/
<div style="position:relative; height:500px; width:100%;">
<table style="height:100%; width:100%; table-layout:fixed; text-align:center; border-collapse:collapse;">
<colgroup colspan="1" style="width:200px"></colgroup>
<colgroup colspan="3">
<col/>
<col style="width:30px"/>
<col/>
</colgroup>
<colgroup colspan="1" style="width:200px"></colgroup>
<tbody>
<tr>
<td style="background-color:silver;">left fixed</td>
<td style="border-right:1px solid black;">col 1</td>
<td style="background-color:red; color:white; border:1px solid black;">col 2</td>
<td style="border-left:1px solid black;">col 3</td>
<td style="background-color:silver;">right fixed</td>
</tr>
</tbody>
</table>
</div>
Nobody mentioned this one here <th> trick:
table{ table-layout: fixed; width: 100%; }
th:first-child{ width: 300px; }
<table>
<thead>
<tr>
<th>yourfirst300pxcolumn</th>
<th>fixedwidth</th>
<th>fixedwidth also</th>
</tr>
</thead>
<tbody>
<tr><td>300</td><td>something</td><td>something else</td></tr>
</tbody>
</table>
Note that in HTML5/CSS3, you can use grid layout to have more control over your tables. It's not that useful for this specific example, with pixel widths, where you can use table-layout:fixed as in Bazzz's answer, but it is useful if you want to use something like min-content.
The following works out of the box on Chrome and Firefox, but not in Safari:
table {
width: 100%;
display: grid;
grid-template-columns: 300px 1fr 1fr 50px;
/* Or, more usefully: */
/* grid-template-columns: min-content 1fr 1fr min-content; */
}
td {
display: block;
}
/* ignore <tr> when laying out the grid; just lay out the cells */
tr {
display: contents;
}
/* browsers can inject <tbody> into the DOM even if it's not in the HTML */
tbody {
display: contents;
}
(Note though that the table border-collapse property doesn't work in this layout, so you may have to fiddle with CSS pseudo-classes like :last-child in order to get your borders to behave the way you want.)
In Safari this doesn't work -- the rows don't break properly. (Although it does work if you use nested <div> elements instead of a <table> and apply similar styles.) However, a simpler layout with just one dynamic 1fr column does work in Safari:
table {
display: grid;
grid-template-columns: 300px 1fr 50px;
}
tbody {
display: contents;
}
tr {
display: contents;
}
td {
border: 1px solid #c0c0c0;
}
What about using jQuery for this and calling javascript function once your table is created or some other event (like click) happens?
See here (I created jsfiddle playground for this)
What it does is that it checks the width of fixed elements (width of the whole table, first and last cell). Then it calculates and assigns the width for the rest of the cells which should have the remaining width divided between them (based on how many there are and how much space is left). Of course this is just quick example of possible solution. It needs polishing (checking null objects, if remaining width is greater than 0, ...)
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table,
you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}
I have a table, with many tds. I want to display a div behind this to give the appearance of it having rounded corners. I have called the Div within a th. Here is a jsFiddle example of the problem.
I thought I could do it using position: realtive; and z-index: -100; yet it doesn't seem to be what I want.
Thanks to anyone for any help.
I think you’ll need a different approach. For the <div> to be the same height as the <table>, you’ll need the <div> to wrap the table:
<div>
<table>
....
</table>
</div>
That’ll also make the <div> appear “behind” the <table> without fiddling with z-index.
From your jsFiddle example, I think you only want the background behind one table column? To achieve this, you’ll need to:
fix the width of all the columns in your <table>
set the width of the <div> to the width of the column you want it to be the background for (or a little wider)
set the left margin of the <div> to the width of the other columns in the <table>
set the left margin of the <table> to minus the width of the other columns in the table.
Maybe something like this?
<div class="compare-rounder">
<table>
<thead>
<th class="price">Price</th>
<th class="product">Product</th>
</thead>
<tbody>
<tr>
<td>$4000</td>
<td>for this</td>
</tr>
</tbody>
</table>
</div>
table,
table td,
table th
{
border: 1px #000 solid;
}
table
{
margin-left: -500px;
}
.product
{
width: 500px;
}
.price
{
width: 50px;
}
.compare-rounder
{
width: 60px;
background-color: #f0f; /*bright pink*/
border: 1px #ccc solid !important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left: 500px;
}
You should do this I guess :
<div class="compare-rounder">
<table>
...
</table>
</div>
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