I would like to be able scroll td elements (except table side column) as screen size smaller than x size..
To be more clear please check: http://jsfiddle.net/uf32ojm5/7/
How can I scroll only comments fields and let "group" column fixed..
To fix "group" column I have done this:
#media only screen and (max-width: 590px) {
.groupColm{
position:fixed;
min-width:100px;
z-index:1;
}
}
But how do I scroll only comments fields?
Thank you in advance!
I Think you have to put the comments fields in an internal table inside the td and just enable scrolling in the size you need to the content of that td which contain the internal table at that time.
hope my answer help.
I solved it:)
div table { display: block; position: relative; width: 100%; }
div tbody { display: block; width:auto; position: relative; overflow-x: auto; white-
space: nowrap; }
div thead tr { display: block; }
div th { display: block; text-align:left; padding-left:10px; height:50px; line-
height:40px;}
div tbody tr { display: inline-block; vertical-align: top; }
div td {display: block; text-align: left; }
live: http://jsfiddle.net/uf32ojm5/12/
Related
I have a table in which I have fixed headers and vertical scrolling on the tbody. However, the columns in this table can grow significantly and I'd like to add horizontal scrolling. At the moment when there are more than 3 columns, the table doesn't look right.
JS Fiddle with three columns (how it should look): https://jsfiddle.net/maxshuty/DTcHh/42626/
JS Fiddle with four columns (this should look like the three column fiddle): https://jsfiddle.net/DTcHh/67311/
I believe the problematic class is header-fixed. It has the following:
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
Which is stopping the rows from being overflown.
Please check out the link below:
Check the demo
I have removed float and added flexbox instead and added #Row1 styles to achieve overflow. I hope this helps.
.header-fixed > thead > tr > th {
width: auto;
min-width: 20%;
float: left;
display: flex;
}
#Row1 {
overflow-x: scroll;
width: auto;
display: inline-flex;
}
I have that which thead is fixed o top and the tbody shows a vertical scroll with this css
thead{
display: block;
}
tbody {
display:block;
height:500px;
overflow:auto;
}
But the problem is that the thead fields width are not adjusted to the tbody fields width
Hoy I can make that the head and the body fields to have the same width?(without the css it have the same width)
Try
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
thead{
display: block;
}
tbody {
position:absolute;
display:block;
height:500px;
Width:200px;
}
try this...
I'd like to create a table like div structure, which is placed in a container, can be scrolled horizontally and gets not breaked. I wrote the structure, but when the content gets longer than the container it puts the rest of the content in a new line.
Here's my code so far:
http://jsfiddle.net/rcdzdyv7/2/
where all of these elements represent a "table" row:
<div class="header">...</div>
<div class="body">...</div>
<div class="footer">...</div>
My goal is to make these rows one-lined and look like if it was a table. How could I solve this?
You can't use float:left because when content reach the width there's no way to avoid the floating elements "jumping" to next line (without changing the html structure).
However you can use display:inline-blockbecuase your elements this way can change their behaviour with the property white-space:nowrap.
Basically:
.container {
width: 500px;
overflow-x: scroll;
}
.header {
width: auto;
display:inline-block;
background-color: #D9D9D9;
white-space: nowrap;
clear: both;
}
.body {
display:inline-block;
margin: 5px 0;
}
.body-row {
background-color: #E5EBFF;
display:inline-block;
clear: both;
white-space: nowrap;
}
.footer {
clear: both;
background-color: #D9D9D9;
white-space: nowrap;
}
.row-title {
width: 300px;
display:inline-block;
}
.row-content {
width: 150px;
display:inline-block;
}
.value {
width: 100%;
}
as in this FIDDLE
You could use:
.row-content {
width: 150px;
display: inline-block;
}
instead of:
.row-content {
width: 150px;
float: left;
}
Let me know if it works!
this is because you are using DIV with delimited width no set height.
so when the width needed will be too high for the container width it will automatically do under. Hope this makes sense. A soluation can be to use inline-block, personnally I would recomment to use a classic table but just my opinion
try these css properties to the <div> for which you want a scroll
div {
overflow-x: scroll;
overflow-y: hidden;
}
hope this is what you want !
We are using the responsive tables as described here: http://dbushell.com/demos/tables/rt_05-01-12.html .
It transposes the table by creating a vertical table with a fixed left column. The transposed header row,
however, is not wrapped on white space and unnecessarily widens the table.
For transposing, the trick is to use display: inline-block; on the table rows and
white-space: nowrap; on the table body.
Any solutions to enable wrapping in the header row?
JsFiddle link: http://jsfiddle.net/ckaodhz1/
Code for the above trick:
table thead { display: block; float: left; }
table tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
table thead tr { display: block; }
table th { display: block; }
table tbody tr { display: inline-block; vertical-align: top; }
You can use <th> tag for all the headers.
Then you can use word-wrap: break-word; for the <th> tag.
You can use ellipsis. try this
.graham tr td:first-child{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width:50px;
}
I have two inline-block elements(width: 50%) inside a div(width:100%).
inside the first inline-block element i have table with many columns. This table is not rendered in its given 50% width. (It comes under the second inline-block element.)
<style>
#col1 {
display: inline-block;
background-color: red;
width:50%;
vertical-align: top;
}
#col2 {
display: inline-block;
background-color: green;
width:50%;
vertical-align: top;
}
</style>
<div>
<div id="col1"><table><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr><tr><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td><td>hai</td></tr></table></div><div id="col2">content</div></div>
Refer this example in: http://jsfiddle.net/6L3h8h7k/
In the above example,the first row of the table its overlapped by the second inline-block element.
How to make this table to occupy only the 50% width.
Some one kindly help me sort out this problem.
Thanks in advance.
Add this style to your table
table {
width: 100%;
table-layout: fixed;
}
JSFiddle is here
Change your css to this one
#co {
display: inline-block;
}
#col1 {
background-color: red;
width:50%;
float:left;
}
#col2 {
float:right;
background-color: green;
width:50%;
}
tr td { display:inline-block;}
Add "co" id to your first div
<div id="co">