this fixed-header table deforms column when resizing window horizontally. Is there way to stop that?
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
table th {
border-left: 1px solid blue;
}
table th,
table td {
padding: 5px;
text-align: left;
border-left:1px solid blue;
}
table th, table td {
width: 150px;
}
table thead tr {
display: block;
position: relative;
}
table tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>pick_up_location</th>
<th>destination</th>
<th>instruction</th>
<th>created_at</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12322</td>
<td>Whanga Road</td>
<td>Crescent Street</td>
<td>Call when arrive</td>
<td>123442342331</td>
<td>comming</td>
</tr>
</tbody>
</table>
</body>
</html>
Keep in mind this fixed-header table. Mean when you have 100 rows. you can scroll the row but the header position is fixed. The display block attributes can not be removed.
UPDATE:
With Mark answer, the table looks fine but still deform at small screen. A screenshot of it
To don't have problems with resizing you have to work in height and width with %.
Like : width: 30%;
height: 40%;
Hope help you.
Do not apply an explicit width or height to tag. Instead, give it:
max-width:100%;
max-height:100%;
just modify the last two ccs declarations as follows:
table{
display: block;
position: relative;
}
table tbody {
position : relative;
overflow: auto;
width: 100%;
height: 300px;
}
Adding word-break: break-all; to all the cells makes your code work (almost, since all characters are not of the same width)
See https://jsfiddle.net/3wn1zzfn/
Your problem is that when it is not possible to fit all cells in a table, the width: 150px; is overridden, and widths are now based on length of the line.
The problem here is that you are applying display: block, you shouldn't use it on tables. Also remove px values on tables. use %, or remove it at all
Remove these lines of code:
table th,
table td {
/*width: 150px*/
}
table thead tr {
/*display: block;
position: relative;*/
}
table tbody {
/*display: block;*/
overflow: auto;
width: 100%;
height: 300px;
}
Here a codepen to show it:
http://codepen.io/sandrina-p/pen/qNYork?editors=1100
--EDIT--
before -1 please can you tell me what's wrong with my solution, to improve it?
Related
I want a pure CSS solution with a fixed table header and same column width for <th> and <td> with different content. I have taken an example and modified it to get column with different content: http://jsfiddle.net/jd72op9n/4/
table tbody,table thead {
display: block; /* comment to get same column with*/
}
table tbody {
overflow: auto;
height: 100px;
}
It seems that I cannot have both:
If take http://jsfiddle.net/jd72op9n/4/ I get a fixed header but the columns for th and td are not the same.
If I remove "display: block", I get the correct column but not fixed header.
Do you have a solution to get both?
I guess the only way is to strictly specify the width of the cells like this:
table th, table td{
width: 80px;
}
tbody{
width: 100%;
margin-right: 20px;
}
Please try this fiddle
And if you want to change width to certain cell, for example the 4th with the long text, you can add this css rule:
th:nth-child(4), td:nth-child(4){
width: 120px;
}
http://jsfiddle.net/patelnirpendra/2bs886p0/
css :
table tbody,table thead {
display: block;
}
table{
border: 1px solid black;
table-layout: fixed;
}
th, td {
border: 1px solid black;
overflow: hidden;
width: 150px;
}
I set the same width for my column headers as my data rows. But they refuse to line up.
I made a fiddle here: http://jsfiddle.net/bwdc78tr/
Here's my CSS
html, body {
height: 100%;
margin: 0;
width: 100%
}
#header {
width: 100%;
height: 60px;
background-color: #013499;
margin: 0;
}
#sidebar {
background-color: #7690C5;
bottom: 60px;
float: left;
height: calc(100% - 120px);
top: 60px;
width: 200px;
}
#content {
background-color: #F2F2F2;
bottom: 60px;
float: left;
height: calc(100% - 120px);
top: 60px;
width: calc(100% - 200px);
}
footer {
clear: both;
margin: -60px 0 0 0;
width: 100%;
height: 60px;
background-color: #013499;
}
.buttons {
float: right;
margin-right: 20px;
}
#dropDownButton {
vertical-align: -5px;
}
#WholeNumber {
width: 135px;
}
#LookupSection {
color: white;
height: 60px;
margin-left: 220px;
}
.WholeNumberCell {
background-color: white;
color: #000000;
}
#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
height: 100px;
padding: 0;
width: 100%;
}
.ImageDataCell {
background-color: white;
border: 1px solid black;
color: #000000;
}
#WholeNumberDiv {
margin-left: 100px;
height: 0;
overflow: auto;
}
.send_button {
margin-right: 20px;
text-align: right;
}
The table is dynamically created. I have read several sites of how to create tables but they all explain basic things. The techniques always break down when expanded upon. I can't find anything that explains more advanced things so if anyone knows any good links then please post them.
I think one problem may be that the example I am using is a staticly sized table (http://www.imaputz.com/cssStuff/bigFourVersion.html) and mine is dynamic. Any ideas on how to adapt this?
In your table ImageDataTable you have your thead then in the first tr you are setting the properties to display:block when it should be display: table-row Further down in your code you set tbody id="TmageDataBody" to display: block when it should be display: table-row-group;
See your updated Fiddle here
Generally you are trying to exert too much control over your table.
First, remove the inline styles from the thead > tr and tbody elements that are setting display:block. You generally don't want this when you're using tables. Just doing this will get your columns to align.
Now remove all of the inline styles setting the column widths... an easier way to to this is to use a colgroup:
<table>
<colgroup>
<col style="width: 50%"></col>
<col style="width: 20%"></col>
<col style="width: 30%"></col>
</colgroup>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</tbody>
</table>
Now this leaves the problem that I BELIEVE you were trying to deal with from the get-go, and that is that your table data creates a table wider than your available space. You can handle this in a few ways. A couple of suggestions:
• Put the table in a container set to scroll its overflow:
div.tableContainer {
overflow-x: auto;
}
• Set up the table to truncate the cell content:
table {
table-layout: fixed;
}
td, th {
text-overflow: ellipsis;
overflow:hidden;
}
Generally, your goal should be to have a table with as little inline CSS as possible.
Several issues:
Your first <th> is closed with a </div> instead of the obvious. Whenver I see HTML giving very unusual and unexpected behavior, I tend to look for these issues using the W3 Validator; most of its output is irrelevant to me, but it's at least good at finding non-matching tags. Browsers often render these things in case they're minor HTML mistakes, but sometimes bad end tags can badly break the format.
You define width in the <th> block, but then you override it with the ancient width HTML attribute. If you want the headers to dictate the width, only set the width there.
This could be just jsfiddle, but the space the table was given didn't allow it to give cells their full intended width. I got it to look okay by setting width: 300%; so that it had horizontal scrollbars. You also had a typo on the "widht" property.
EDIT: As you indicated, seems there was more to it. You also had the display: block; property set on some of the elements via CSS. This overrides the element's default, which is display: table-cell; and display: table-row;, which is what gives it its signature constant-width behavior.
I know my question is related to this one, but my situation is slightly different and also there is no solution in the other question.
So, I have the following markup:
<table>
<tr>
<td>
<div>I respect max-width</div>
</td>
<td>
<input value="I do not" />
</td>
</tr>
</table>
With the following styles:
table {
width: 200px;
background: #f7f7f7;
}
td {
width: 50%;
background: #e7e7e7;
}
div, input {
display: block;
width: auto;
max-width: 100%;
background: red;
}
This would be the expected result:
But, this is the actual one:
Somehow the auto width of the input field determined by the browser is larger than 50% (100px). That's all fine and dandy, but why isn't it respecting the max-width: 100%?
If I force set width: 100% it works as expected (second image), however that's not what I want. I want it to be as wide as the browser decides is good, just not wider than 100%.
Any ideas?
Here's the fiddle.
That could help you: Fiddle
td {
box-sizing: border-box;
display: inline-block;
width: 50%;
background: #e7e7e7;
}
If you set the table to table-layout: fixed you get the result you want:
table {
width: 200px;
background: #f7f7f7;
table-layout: fixed;
}
input {
display: block;
max-width: 100%;
background: red;
box-sizing: border-box;
}
Here is my DOM:
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
and my CSS:
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?
td tags are forced to take up all of the remaining space in their parent.
So, your width: 10%; is completely ignored by the layout.
See this non-working JSFiddle Demo.
But, if we add some display: inline-block; to the td, then it fixes the problem.
See this (now) working JSFiddle Demo.
I suggest you add another td tag, and give it a width of 90%
<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
}
table {
height: 100%;
width: 100%;
}
td.td1 {
border: 1px solid gray;
height: 10%;
width: 10%;
}
td.td2{
border: 1px solid gray;
width: 90%;
}
tr.tr1{
height:10%;
}
tr.tr2{
height:90%;
}
For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/
I have a table hosted in a div. Neither the table nor the hosting div has a height specified.
After the table header row, each subsequent row looks like this:
<tr class="movie-info-row">
<td>
<div class="movie-cover">
<img class="movie-image" src="" />
<a class="movie-link" href="" target="_blank">IMDb</a>
</div>
</td>
<td colspan=5>
<div class="movie-details">
<p class="movie-file"></p>
<div class="movie-div-left">
<p class="movie-category"></p>
<p class="movie-director"></p>
<p class="movie-insertdate"></p>
</div>
<div class="movie-description-container">
<p class="movie-description"></p>
</div>
</div>
</td>
</tr>
I want each table row (except for the header) to have the same fixed height but I just can't get it to work after hours of trying all kinds of approaches (and of course searching on stackoverflow and elsewhere).
My css (in less syntax) looks like this:
.movie-info-row {
height: 240px;
p {
margin-top: 2px;
margin-bottom: 2px;
}
td {
height: 100%;
overflow: hidden;
}
}
.movie-cover {
border: 1px solid black;
width: 130px;
height: 100%;
overflow: hidden;
}
.movie-details {
border: 1px solid black;
height: 100%;
overflow: hidden;
}
.movie-file {
font-size:larger;
}
.movie-div-left {
float: left;
width: 40%;
vertical-align: top;
display: inline-block;
}
.movie-description-container {
display: inline-block;
float: right;
width: 60%;
overflow: hidden;
vertical-align: top;
}
.movie-description {
overflow: hidden;
}
As you can see I have fixed the height of the row to 240px and for good measure have each td height set to 100% with overflow hidden.
The trouble maker is the description text, which can be quite long and it messes with the table row height. As you can see I have set overflow to hidden in many places (which is probably overkill).
Note: This is not browser specific. I am not even using IE. I am testing it with firefox and chrome (both latest versions).
I am really at a loss. What am I doing wrong? Any help would be greatly appreciated.
ETA:
Here's a picture of a table row as it looks now: SampleRow
As you can see the description text takes the row height with it. I want it limited to a fixed height - basically the hight of the title image. And yes, I want all the information (with more to come) in there. So that is non-negotiable.
Too many hiddens and floats and whatnot. Simplify and conquer. Also you have nested selectors inside of another selector (p{} and td{})
Demo Fiddle
CSS:
.movie-info-row {
height: 240px;
}
p {
margin-top: 2px;
margin-bottom: 2px;
}
td {
border: 1px solid black;
height: 100%;
}
div, p {
display: table-cell;
}
.movie-cover {
width: 130px;
overflow: hidden;
}
.movie-details {
height: 100%;
width: 100%;
}
.movie-file {
font-size:larger;
}
.movie-div-left {
width: 35%;
vertical-align: top;
display: inline-block;
}
.movie-description-container {
display: inline-block;
width: 55%;
vertical-align: top;
}
.movie-description {
overflow: hidden;
}
By the looks of your HTML all of your data will go into one table cell is this how you want it?
Why not structure it like using individual tags for the headers with a colspan of what ever and then do a new for each row you need along with its data like this?
<tr>
<th colspan=2>Header</th>
</tr>
<tr>
<td>cell 1 data</td>
<td>cell 2 data</td>
<tr>
Then you can do this in the css, which would give you this same fixed height for all the rows:
tr {
height: 240px;
}
That way you can just use the table headers to describe each column and use a lot less code to make it work properly. Or from what I understand you are trying to do.