I using position fixed to freeze first column in table. How to make it the first column layout(width and height) same as other column to looks like no different with other columns but with freeze status.
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
css:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
JSfiddle demo
Try the below -
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
width: 300px;
height: 100px;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 200px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
margin-top: -1px;
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
}
<div>
<table>
<tr>
<th class="headcol">h1</th>
<td class="long">h2</td>
<td class="long">h3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
</table>
</div>
Do you mean like this?
CSS:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
width: 143px;
height: 96px;
margin-left: 5px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
HTML:
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
Related
Is it possible to set the height of rows in the table to be as the height of the first column in the row if it's position is absolute?
It of course works if I do not use 'position:absolute' (or 'position:fixed') but I need first and last columns to be fixed.
In the example you can see that first column's rows are overlapping. I would like the first and second rows to fit the text inside completely.
http://jsfiddle.net/ujwz4htg/27/
table {
border-collapse: separate;
border-top: 1px solid grey;
}
td {
height: auto;
margin: 0;
border: 1px solid grey;
border-top-width: 0px;
}
td:first-child {
white-space: intial;
position: absolute;
width: 80px;
left: 0;
top: auto;
border-top-width: 1px;
margin-top: -1px;
overflow: hidden;
}
td:last-child {
white-space: initial;
position: absolute;
width: 80px;
right: 160px;
top: auto;
overflow: hidden;
background: grey;
}
div {
width: 600px;
overflow-x: scroll;
padding-left: 5em;
overflow-y: visible;
padding-bottom: 1px;
}
.long {
background: pink;
letter-spacing: 1em;
}
<div>
<table>
<tr>
<td>Row Row Row Row Row</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>1 222222 333333333</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>3</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>4</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>5</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
</table>
</div>
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>
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 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 have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal {
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
.Table-Normal thead tr {
background-color: #E74C3C;
font-weight: bold;
}
.Table-Normal tr {
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
}
.Table-Normal tr td {
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
}
.Table-Normal tbody tr:nth-child(2) {
background-color: #EEE;
}
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>
Remove display: block in .Table-Normal
Fiddle
.Table-Normal {
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
As people have mentioned you have to remove display:block; for this to work. If you need to keep scrolling functionality wrap the table inside a div and set overflow rules on that
<div class = "table-container">
<table>...</table>
</div>
.table-container{
height:100px
width:100px
overflow-x:scroll;
table{
display: table;
width:100%;
}
}