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>
Related
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 make it so that images in cells in an html table expand when you hover over them. I want this to be universal to all tables on my website. Here's my code so far:
td img {
height: 150px;
}
td img:hover{
height: 175px;
}
This code makes the images appear at their correct height, but nothing hapens when I hover over them. Obviously I'm doing something wrong, but what is it?
Consider defining the width and height of the cells and adjust the image within those parameters. This way the rows don't shift around when you hover -- change table image size on hover
html {
padding: 50px;
}
table {
width: 600px;
padding: 10px;
background: #FFF;
border: 1px solid #BBB;
}
th {
padding: 10px;
}
td {
vertical-align: middle;
text-align: center;
padding: 5px;
border: 1px solid #DDD;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 200px;
height: 200px;
}
td img {
width: 75%;
height: auto;
}
td img:hover{
width: 90%;
height: auto;
}
<table>
<thead>
<th>Image Title</th>
<th>Image</th>
</thead>
<tbody>
<tr>
<td>Image 1</td>
<td><img src="http://www.logoeps.net/wp-content/uploads/2013/06/stackoverflow_logo.jpg" /></td>
</tr>
</tbody>
</table>
you can do it with CSS
td:hover img{
height:175px;
}
you can use jQuery for this also :
$('td img').on('mouseenter',function(){
$(this).css({
'height':'175px'
});
});
* {
margin: 0;
padding: 0;
}
img {
height: 150px;
width: auto
}
td:hover img {
background: red;
height: 200px;
}
<table>
<tr>
<th>Title</th>
<th>Image</th>
</tr>
<tr>
<td>Image Title</td>
<td><img src="https://torange.biz/photofx/5/8/image-profile-picture-beautiful-exotic-flower-5532.jpg" alt=""></td>
</tr>
</table>
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
I have an HTML page in which there is a table which populates data from a database table and I am trying to restrict the size of the table by placing it in a div like in the following
<div id="scrollablebody">
<table class="clientTable">
<thead>
<tr>
<th>Grade</th>
<th>Term</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<!--ko foreach: products-->
<tr>
<td class="clientproductHeader" data-bind="text: $data">
</td>
<td class="clientproductHeader" colspan="13"></td>
</tr>
<tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">
<tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
<!--/ko-->
</table>
</div>
CSS for div
#scrollablebody{height:500px;overflow-y:auto;width:100%;}
But for some reasons the text in tbody is occupying all the space like in the following image
As you can see in the above picture the row with c5+ is unusually occupying lot of space
CSS for the Table
.clientTable {
max-width: 100%;
background-color: grey;
height:75%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 98%;
margin-left:0;
margin-right:100px;
float: left;
overflow:scroll;
}
table.clientTable thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.clientTable td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientTable th {
padding: initial;
line-height: normal;
text-align: center;
width: initial;
height: 20px;
border: 1px outset gray;
background-color: black;
color: white;
cursor: pointer;
}
Change height to max-height. It's going grow to size if you don't specify and have the overflow as auto.
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;
}