I have a table and I want to set a fixed width of 30px on the td's. the problem is that when the text in the td is too long, the td is stretched out wider than 30px. Overflow:hidden doesn't work either on the td's, I need some way of hiding the overflowing text and keeping the td width 30px.
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
It's not the prettiest CSS, but I got this to work:
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
Examples, with and without ellipses:
body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}
/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
table.with-ellipsis td {
text-overflow: ellipsis;
}
<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
you also can try to use that:
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
It is not only the table cell which is growing, the table itself can grow, too.
To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
(Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)
So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)
The above suggestions trashed the layout of my table so I ended up using:
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.
This workaround worked for me...
<td style="white-space: normal; width:300px;">
Put a div inside td and give following style width:50px;overflow: hidden; to the div
Jsfiddle link
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
Chrome 37.
for non fixed table:
td {
width: 30px;
max-width: 30px;
overflow: hidden;
}
first two important! else - its flow away!
Just divide the number of td to 100%. Example, you have 4 td's:
<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>
We use 25% in each td to maximize the 100% space of the entire table
Related
I have a very large table that doesn't fit a page and I added horizontal scrollbar like this:
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
}
And <table class="table-x-scroll">...</table>
But I also want my table to be in the center of a page. I used to use align="center" but now, when I added display: block it doesn't work. Table is always at the left. How can I do these two things at the same time?
Would be better to use a wrapper for the table and add overflow to that wrapper not the table it self. This way you can control the behavior better.
And also use margin:0 auto on table to center it horizontally. No need for display:block
See below or better in jsFIddle
table {
border: 2px solid red;
width: 300px;
margin: 0 auto;
}
td {
border: 1px solid red;
}
.wrapper {
width: 100%;
overflow-x: auto;
}
<div class="wrapper">
<table>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
Try to add margin-left:auto; margin-right:auto; in your style and specify the width
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin-left:auto;
margin-right:auto;
width:50%;
}
<table class="table-x-scroll" border="1">
<tbody>
<row>
<td>AA</td>
<td>BB</td>
</row>
</tbody>
</table>
Try adding Margin : 0 auto
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin : 0 auto
}
I can see that others have answered the aligning problem. But i couldn't see the "Doesn't fit to page" error so here is a solution for that:
In the css you specified overflow-x: auto;
If you change that to overflow-x scroll; it will make it scale to whatever size you choose to specify. and make it scrollable. The scrollbar within is possible to edit/remove, but it will still scroll ^^
I personally recommend the vw,vh values
example:
.bunnydiv {font-size: 1vw, 1vh;} This will make it scale to 1% of the width and of the height of the monitor. This can be specified with either vh, vw, vh and vw. Not both paramaters are needed, and it will scale accordingly :-)
I found some code I made myself some time ago, use this as a reference :-)
.div_scroll
{overflow-y: scroll;
display: block;
top:0px;
right: 0px;
position: absolute;
transform: translate(-23.6vw, 15vh);
border: 3px solid #dddddd;
max-height: 75vh;
width: 76vw;
margin: 0px;
background-color: white;}
It's copy-pasted, and setup this way for readability. Don't format you code like this unless it works better for you :-)
There's a table with three columns, the first and the last are fixed and the middle one should be fluid.
The problem - inside of the middle column there's text with nowrap and it prevents it from being fluid.
How that could be done?
How it looks on wide page (correct behaviour):
How it should look on narrow page:
How it actually looks on narrow page (incorrect behaviour, see scrollbar):
The code https://jsfiddle.net/8c9msa71/
td {
border: 1px solid black;
}
.fluid {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tr>
<td>first</td>
<td class="fluid">very-very-very-very-very-very-long-second-text</td>
<td>third</td>
</tr>
</table>
you can do it by adding a div
td { border: 1px solid black; }
.fluid { position: relative; width: 70%;}
.fluid div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 5px;
right: 5px;
top: 0;
}
<table width="100%">
<tr>
<td>first</td>
<td class="fluid">
<div>very-very-very-very-very-very-long-second-text</div>
</td>
<td>third</td>
</tr>
</table>
I noticed the solution to add a div.
If you don't want to or need to add a div, you could use max-width.
Explanation:
Your first problem is that none of your elements has a width attribute set. To start with I would set a max-width of your "very-very-long-second-text". For example you can add max-width: 60vw; to your .fluid. If you're not familiar with the vw syntax, read more here: https://www.w3.org/TR/css3-values/#vw
By only adding this, you'll be almost there. You'll still have one problem left: On very small devices / resolutions, you notice that your third table-data, <td></td> will disappear out of visible area.
Instead of collapsing ALL the content, I recommend using display: inline-block; on your table data <td></td>. What this does is that it will display your table data inline as long as they have enough space to be inline. In addition a small part of the information will be visible, instead of the result of NO information visible at all. When the available area becomes smaller (i.e. resizing the window), they will start jumping down one by one.
Full CSS:
td {
border: 1px solid black;
display: inline-block;
}
.fluid {
max-width: 60vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I am making a table for products comparison. It's a table with vertical rows, a header at the left side and two or more product descriptions in vertical rows inside table body. It should be horizontally scrollable in case if user chooses a lot of products.
I have used CSS from this answer to transpose a table (i.e. make vertical rows). And now I can't manage to add a horizontal scrollbar inside tbody in case if table exceeds the predefined width. I am looking for something similar to this question but applied to my transposed table.
Here's what I have now: JSFiddle and here's what happens when I limit the table width to 200px:
Try the combination of inline-blocks and nowrap:
table { border-collapse: collapse; white-space: nowrap; }
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; }
tbody {
width: 300px;
overflow-y: hidden;
overflow-x: auto;
}
<table>
<thead>
<tr>
<th>name</th>
<th>number</th>
</tr>
</thead>
<tbody>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
<tr>
<td>Jon Snow</td>
<td>998</td>
</tr>
</tbody>
</table>
table shouldn't be displayed as block, if it not necessary for your other layout
I've added white-space: nowrap to prevent line wrapping
I've displayed tbody and thead as inline-block so now you can manage them like inline elements.
If you would like to scroll the tbody only without thead, it might looks like this:
table { border-collapse: collapse; white-space: nowrap; }
tr { display: inline-block; }
th, td { display: block; border: 1px solid black; }
tbody, thead { display: inline-block; vertical-align: top; }
tbody {
width: 150px;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
tbody tr { margin-right: -5px;}
<table>
<thead>
<tr>
<th>name</th>
<th>number</th>
</tr>
</thead>
<tbody>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
<tr>
<td>Jon Snow</td>
<td>998</td>
</tr>
</tbody>
</table>
You can think about blocks layout instead. In fact you've already implemented itexcept the HTML what is a bad pattern.
This won't be valid HTML, but you could wrap tbody with a div, then give the div the width and overflow-x property.
I have a table on my layout that has 5 columns, 3 of them should be fixed width in px and the other 2 should be fluid.
It sounded simple at first, but the problem is the two fluid columns should behave differently.
The last column should stretch as much as it can to fit its contents, so they are never hidden, but shouldn't ever leave empty space. And the middle column should occupy all the free space it can find, but also overflow to hidden in case the last one needs to grow larger.
I tried to make this work with css, but I couldn't manage to make it work... Is there a way to do this with pure css or I need js?
EDIT
That's what I got so far:
HTML
<table>
<tr>
<td class="fixed">fixed</td>
<td class="fixed">fixed</td>
<td class="fluid hidden">fluid</td>
<td class="fixed">fixed</td>
<td class="fluid visible">this content should always be visible</td>
</tr>
</table>
CSS
table{
width: 100%;
table-layout: fixed;
}
td{
padding: 10px;
white-space: nowrap;
}
.fixed{
background-color: #ddd;
width: 60px;
}
.fluid{
background-color: #aaa;
}
.visible{
}
.hidden{
overflow:hidden;
}
http://jsfiddle.net/KzVbX/
It works almost as expected. Except for the last column.
Maybe I can help, maybe not.
First, I would use divs instead of tr/td. I honestly don't have a need for using tables since CSS was introduced, and I'm rather surprised that some people still do. But there could be a reason, so please do not take that as criticism.
If you use divs, then edit this section of your code:
.visible {
overflow:visible;
min-width: 210px;
}
That will make sure that the div is at least 210 pixels wide no matter what. It should work.
BTW, if this is the only table on the page and that div or td is unique in the sense that it has a minimum height, then you may want to use an id instead of a class. That will make your code cleaner and more elegant.
Hope this helps.
If you don't need wrapping do this:
td{
padding: 10px;
}
If wrap is desired, you need to change width of table to auto and add min-width parameter.
table{
width: auto;
min-width: 100%;
table-layout: fixed;
}
Try this and see if it is close to what you are looking for:
DEMO - http://jsfiddle.net/WGpB3/
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td style="width:60px;"> </td>
<td style="width:60px;"> </td>
<td style="overflow:hidden;"> </td>
<td style="width:60px;"> </td>
<td style="overflow:visible;"> </td>
</tr>
Made changes to CSS file
*DEMO - http://jsfiddle.net/KzVbX/2/
table{
width: 100%;
table-layout:fixed;
}
td{
padding: 10px;
}
.fixed{
background-color: #ddd;
width: 60px;
}
.fluid{
background-color: #aaa;
}
.visible{
overflow:visible;
}
.hidden{
overflow:hidden;
max-width:20%;
white-space:nowrap;
}
I am trying to finish formatting a table that is built dynamically. On the last page, when the table is sparse because there are fewer than the rows needed to fill the table, the rows are displayed at the bottom of the table space instead of the top. I've tried to correct this unsuccessfully. How can I display these rows at the top?
It doesn't seem to matter, but the table is built by the will_paginate Ruby gem. I say it doesn't matter because when I look at the HTML, it's just a table. There is nothing in there that is making this happen. The table size is formatted to display 10 rows. If there are only 3, they are just listed as 3 rows as you would expect. So, I think it is just an HTML/CSS formatting question.
The Table as it displays:
The SCSS:
.feeds {
list-style: none;
margin: 0;
text-align: left;
table-layout: fixed;
width: 700px;
height: 250px;
overflow: auto;
vertical-align: top;
li {
overflow: auto;
padding: 10px 0;
border-top: 1px solid $grayLighter;
&:last-child {
border-bottom: 1px solid $grayLighter;
}
}
table, thead, th, tr, tbody, tfoot {
vertical-align: top;
}
td {
vertical-align:top;
height: 1ex;
overflow-x: auto
}
}
The HTML:
<table class="feeds">
<tbody><tr>
<th id="url_cell"><a class="sortfield asc" href="/feeds?commit=Search&direction=desc&search=&sort=feed_url&utf8=%E2%9C%93">URL</a></th>
<th>Etag</th>
<th>Update date</th>
</tr>
<tr>
<td id="url_cell">http://www.skalith.net/rss</td>
<td id="etag_cell">RZWAFDMVHPXHWECK</td>
<td id="update_cell">August 5, 2013</td>
</tr>
<tr>
<td id="url_cell">http://www.viva.name/rss</td>
<td id="etag_cell">KFIEQYAUWMUHUJNY</td>
<td id="update_cell">August 5, 2013</td>
</tr>
</tbody></table>
The header row is filling out the space vertically (this is what it should do because of your table-layout. If you wrap it with <thead> and then only wrap the body of the table with <tbody> it will align it correctly. However, because you have table-layout: fixed, with height: 250px, the remaining rows will grow to make up the difference.
See: http://codepen.io/chrisrockwell/pen/gGmFq
Can you add a class to the table if it doesn't have a full set of rows? This way you could remove the height declaration.
Other options:
I'm guessing you need to have a set height but, if not, you could remove it.
Wrap the table in a <div> and assign your height and overflow to the div:
<div class="wrap">
<table class="feeds"></table>
</div>
.wrap {
height: 250px;
overflow: auto;
}
table {
/* just remove the height and overflow */
}
Here is an example of Option 2: http://codepen.io/chrisrockwell/pen/wpyfI