I have table, for example:
<table>
<tr>
<td>
</td>
<td>
</td>
<td class="fixed">
</td>
</tr>
</table>
for example my table width is 800px.
all first two columns must be fluid, but last: fixed...
how could i do this?
also what would be if my first two columns are very small? how to attach fixed to right? (also height is fluid)
The <table> gets table-layout: fixed; this will allow the third column to remain its fixed width
The table also gets a max-width: 800px and width: 100%; it will resize
We place three <col> elements inside the table to represent the columns; the third column gets our class with width: 250px
Complete Example
table {
table-layout: fixed;
max-width: 800px;
width: 100%;
}
.fixed {
width: 250px;
}
td {
padding: 10px;
border: solid 1px #000;
}
<table>
<col>
<col>
<col class="fixed">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Related
I have a table with several columns. On chrome, the height of the table-cell (td) with an image inside varies when image height is in decimals (e.g. 76.54px) On firefox and IE this works fine and all tds have same height.
Please see the following fiddle:
https://jsfiddle.net/sstzg0rh/3/
Height of the column with image is few point less pixels then the other columns. This works fine on firefox and all tds have same height. Why chrome is showing different behavior with column height and how to fix this
<div class="container-row">
<div class="container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Image</th>
<th>Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
<tr>
<td>
ABCDEFG
</td>
<td>
<img src="http://via.placeholder.com/74x90" alt="This is a no image">
</td>
<td>
ABCDEFG
</td>
</tr>
</tbody>
</table>
</div>
body {
line-height: 1.5;
}
img {
max-width: 72px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
tr {
min-height: 80px;
width: 100%;
border-bottom: 1px solid red;
}
td {
white-space: nowrap;
vertical-align: top;
}
I thought your img elements was a inline elements that led to the problem.
The solution i thought was
img{
display:block;
}
I'm trying to make a 2 columns table with the following properties :
the table must fit to its parent container
the first column must fit to its content
the second column content must be horizontally scrollable if it
exceed the table width.
► I began with the following code :
(css here is just to "see" the main container and the table - width: 500px is just for the example, it could be any value)
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is not ok : The table does not fit to its container
Point 2 is ok : first column fit to its content
point 3 not ok : as the table does not fit its container, I can't apply an overflow: auto for now
► the only way I found to make the table fit its container is to add the following css properties : table-layout: fixed & width: 100%
then I can add width:100%, display: inline-block & overflow: auto to the second column to make the content scrollable if it exceed the table width
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
table-layout: fixed;
width: 100%;
}
.two {
width:100%;
display: inline-block;
overflow: auto;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
Point 1 is now ok : The table fit to its container
Point 2 is not ok anymore : table-layout: fixed makes the two columns
point 3 now ok : the content of the second column is scrollable if its too long
► So now I'm looking for a solution to have the 3 points OK.
to get the closest to wha I need, I set width: 50px to the .one class, but in my project I can't do that as I have several tables with differents content size in the first column, so I need the first column's size to be set automatically to fit to the content as in the first snippet.
Any help ?
you can use word-break:break-all for .two
.main {
width: 500px;
border: 1px solid black;
}
table {
background: rgba(0,0,0,0.5);
width: 100%;
}
.two{
word-break:break-all;
}
<div class="main">
<table>
<tr>
<td class="one">content_1</td>
<td class="two">
<div class="content">short string</div>
</td>
</tr>
<tr>
<td class="one">content_2</td>
<td class="two">aVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongStringWithoutSpaces</td>
</tr>
</table>
</div>
I cannot figure out how to keep this tables height contained within the containing div. My goal is to be able to scroll in order to see it all. There are plenty of solutions to solve this when dealing with the width, but I have not been able to get them working with the height.
<html>
<head>
<style>
.container {
border: 1px solid black;
height: 100px;
}
td {
font-size: 40px;
}
table {
table-layout: fixed;
height: 100%;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container">
<table>
<thead>
<tr>
<th>
header
</th>
<th>
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
https://jsfiddle.net/meeow314159/3vs9bmsf/
.container {
border: 1px solid black;
height: 100px;
overflow-y: scroll;
}
td {
font-size: 40px;
}
table {
table-layout: fixed;
height: 100%;
}
<div class="container">
<table>
<thead>
<tr>
<th>
header
</th>
<th>
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
<tr>
<td>
data
</td>
<td>
data
</td>
</tr>
</tbody>
</table>
</div>
You were almost there. The overflow-y needs to be applied to the parent container with the height set on it, not the table itself. Hope this helps.
.container { overflow-y:scroll; }
You need to apply the overflow-y:scroll on the container
https://jsfiddle.net/3vs9bmsf/1/
.container {
border: 1px solid black;
height: 100px;
overflow-y: scroll;
}*
add display:block; to table
table {
table-layout: fixed;
height: 100%;
overflow-y: scroll;
display:block;
}
you should look here for some good tips about overflow.
and maybe look at word-wrap and white-space if you want to control the text in y-axe.
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'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