HTML
<table >
<tr>
<td>veeeeeeeeeeeeeeeeeeeeery looong</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS
table {
width: 80px;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
}
I want every column to be 25% of 80px, thus 20px in size. How do I stop the first column from getting larger (its content can be hidden).
You could use table-layout: fixed
table {
width: 80px;
border: 1px solid #333;
table-layout: fixed;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
border: 1px solid #333;
word-wrap: break-word;
}
An example: http://jsfiddle.net/wsastn47/1/
edit: #mevius suggestion word-wrap: break-word;
I would suggest the following:
table {
width: 80px;
}
td {
width: 25%;
border: 1px dotted blue;
word-break: break-all;
}
Use the word-break property to allow the long text strings to wrap within the table
cell and remain visible.
See demo: http://jsfiddle.net/audetwebdesign/7ptrtwac/
Note: The max-width property is not needed for td.
You can use the following CSS as well :
table {
width: 180px;
border-collapse:collapse;
table-layout:fixed;
}
td {
overflow: hidden;
max-width: 25%;
width: 25%;
word-wrap:break-word;
border:solid 1px;
}
Demo link DEMO FIDDLE
Related
I'm trying to display rotated text in a table cell. When I use rotate(), the table cells do not maintain their original widths unless I specify position: absolute. With that, the divs containing the text are misaligned as shown in the fiddle.
How is it possible that the text is shown outside of the table cell? How do I get it inside the table cells with using fixed width/height cells? I wasn't able to keep the cells their fixed width without the position: absolute.
JSFiddle: https://jsfiddle.net/jasoncable/f82h95gp/
Code :
.assignment-table {
height: 150px;
}
.assignment-table tr {
height: 150px;
}
.assignment-table tr td {
width: 50px;
height: 150px;
border: 1px solid black;
}
.assignment-table tr td div {
transform: rotate(-90deg);
font-size: 12px;
width: 150px;
height: 50px;
position: absolute;
}
<table class="assignment-table">
<tr>
<td>
<div>Grade in Marking Period<br>points/points</div>
</td>
<td>
<div>Assignment 1</div>
</td>
</tr>
</table>
You can adjust the transform-origin then apply a translation:
.assignment-table {
height: 150px;
}
.assignment-table tr {
height: 150px;
}
.assignment-table tr td {
width: 50px;
height: 150px;
border: 1px solid black;
}
.assignment-table tr td div {
transform: rotate(-90deg) translateX(-50%);
font-size: 12px;
width: 150px;
height: 50px;
position: absolute;
transform-origin: left top;
}
<table class="assignment-table">
<tr>
<td>
<div>Grade in Marking Period<br>points/points</div>
</td>
<td>
<div>Assignment 1</div>
</td>
</tr>
</table>
I want to ellipsify the text in the second column without hard-coding a width for either of the two columns. Is this possible where only the parent element (table) has a fixed width?
table {
width: 100px;
border: 1px solid green;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
.td div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
</tr>
</table>
You can do that within a nested table, I use a CSS table for the example, and added a span tag into the div for the table layout.
jsFiddle
table {
width: 200px;
border: 1px solid green;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
.td2 div {
display: table;
table-layout: fixed;
width: 100%;
}
.td2 span {
display: table-cell;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2">
<div><span>thequickbrownfoxjumpsoverthelazydog</span></div>
</td>
</tr>
</table>
You need table-layout: fixed;
More info - https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
The CSS for the ellipsis part is ok, but what happens is that, by default, a table calculates its width based on the content width, so the table cell would be as wide as the content, and the text would never be collapsed. table-layout: fixed; changes that. It means the table will calculate the dimensions of the cells before inserting the content, then the content will not affect the table's dimensions when rendered.
The tradeoff is that your table will no longer balance the columns automatically:
table {
width: 100px;
border: 1px solid green;
table-layout: fixed;
}
.td1 {
border: 1px solid blue;
}
.td2 {
border: 1px solid red;
}
td div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tr>
<td class="td1">Label:</td>
<td class="td2"><div>thequickbrownfoxjumpsoverthelazydog</div></td>
</tr>
</table>
I'm trying to create a table where a fluid column has a min width.
All other columns have a fixed width, and should not grow wider or thinner.
I can get the fluid column to grow and shrink correctly, so that it takes up the remaining space in container which sets the max width to 900px, however I can't get it to take a minimum width.
This means when the window and container are squashed, the fluid column gets covered, rather than behave like the fixed columns at this point.
Applying a min-width to the th and/or td doesn't do anything.
Applying a min-wdith to the div inside the fluid td does mean the text has a minimum width, however it doesn't stop the column from shrinking to less than this minimum, so the text is underneath the next column's text.
Any ideas?
HTML:
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
CSS:
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
table th, table td {
border-top: 1px solid #333;
}
JSfiddle:
http://jsfiddle.net/ajcfrz1g/14/
DEMO
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
i am trying to solve your problem. in this your fluidhas no min-width because this is table structure. but you can give width.
see this example
.container {
max-width: 900px;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}
th.fixed {
width: 100px;
}
th.fluid {
min-width: 100px;
}
td.fluid div {
width: auto;
overflow: hidden;
text-overflow: ellipsis;
}
td.fluid {
background-color: #aaa;
min-width: 100px;
white-space: nowrap;
overflow: hidden;
}
td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}
table th, table td {
border-top: 1px solid #333;
}
<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>
I've got a container element that's a certain width, with overflow-x: auto. In it I have a block level header element (h1) that's supposed to, being a block element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space.
Fiddle demonstrating the problem: http://jsfiddle.net/rand0mbits/qUh3s/
HTML:
<div id="one">
<h1>header</h1>
<table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td></tr></table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
}
table td {
border: solid 1px;
padding: 20px;
}
How do i make the <h1> fill the whole width of the container?
See the fiddle.
Use the HTML caption element:
<div id="one">
<table>
<caption>
<h1>header</h1>
</caption>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
margin-top: 0;
text-align: left;
}
table td {
border: solid 1px;
padding: 20px;
}
The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.
What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.
jsfiddle: http://jsfiddle.net/yetti/Ggua5/
Try this:
css
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
position:relative;
}
table td {
border: solid 1px;
padding: 20px;
}
h1:after {
content:"";
background: blue;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left:100%
}
fiddle
Change this CSS code like the following then check and let me know if you want this:
#one {
width: 100%;
overflow: auto;
border: solid 1px;
}
I have a resizable and movable div using JQuery UI. I want a table inside it that scrolls vertically. Trying to set the table height to 100% basically does nothing, and absolute positioning with top and bottom of 0 doesn't work either. I have tried to put a separate div as a container and that has gotten me closer than anything, but it still does not behave properly.
Here is the fiddle: http://jsfiddle.net/scottbeeson/KrP7v/1/
Here is the relevant CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
And the basic HTML layout:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
I think that this is what you want.
http://jsfiddle.net/KrP7v/12/
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Here's what you can do:
http://jsfiddle.net/KrP7v/4/
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}