I have the HTML table & its CSS.
CSS :
#outerDIV {
position: relative;
padding-top: 20px;
}
#innerDIV {
overflow-y: auto;
height: 500px;
}
table#mytable tbody tr:first-child
{
width:100%;
position :absolute;
}
HTML :
<div class="outerDIV">
<div class="innerDIV">
<table id="#mytable"></table>
</div>
</div>
I need the fixed header tags of table, so is the above code does, but the width of the th tags gets compressed to the left & does not matches the width of the tr's of the body. How to make the tr to 100% width ?
NEVER try to use absolute or even relative re-positioning on <tr>, <td> and <th>. It's not supposed to work in tables, and in most cases the results will be nowhere near what you'd expect.
You want the <th> to span the width of multiple columns, but you can't do this with CSS so you need to do it in the HTML (see HTML colspan in CSS).
If you add a colspan attribute to the <th> it should do what you want (see Colspan all columns). If you know the number of columns in the table, use that, e.g. for 5 columns use <th colspan="5">, but you can also use a larger number and it should be ok, e.g. <th colspan="100">.
Some other notes: as others have mentioned, you shouldn't use position on a <tr>. Also, don't include the # in an element id, i.e. it should be
<table id="mytable"></table>
Related
I have a table that I wish to have the following attributes:
The table has a set width imposed by a parent element, 500px for the sake of argument.
No line-breaking in cells, only one line per cell.
Some cells should align their width with the width of their content.
The rest should consume the rest of the available space in the row.
I have managed to achieve this without criteria #2 (no line-breaking). When I try to apply no line-breaking the table just becomes insanely wide overflowing the parent container.
Here is my fiddle https://jsfiddle.net/marpal/705p9pqj/.
<div>
<table>
<tr>
<td class="small">OS</td>
<td class="small">User</td>
<td class="large">Long Text 1</td>
<td class="small">Date</td>
<td class="large">Long Text 2</td>
</tr>
<tr>
<td class="small">Ubuntu</td>
<td class="small">Admin</td>
<td class="large">This is a test text that should stretch until it is finally truncated, at least I think that that is the correct use of the word truncated. Not to mention the spelling, how the hell do you spell truncated? It feels right though.</td>
<td class="small">2016-02-14</td>
<td>This is the next long text that should be truncated into one line and the overflow hidden from the world.</td>
</tr>
</table>
</div>
div {
width: 500px;
}
table {
width: 100%;
}
td {
border: 1px solid grey;
overflow: hidden;
}
td.small {
width: 1%;
}
td.large{
//white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Is it possible to achieve the last criteria (no line-breaking), while keeping the size limit imposed by the parent DIVs width, purely through CSS or will I need to calculate widths dynamically with JavaScript? I would like to avoid this since I think it's ugly and not always super dependable, especially since this table will be updated dynamically during run-time.
Also, how can I get the date to fill a whole cell without line breaks?
I am trying to display a table in HTML but it seems the table is unable to meet the specs. I would like to data to be in the same place on the screen otherwise it will cause all kinds of problems with the users as they mis-read the data. So I need fixed width columns. I also would like the column headers to remian fixed if the data exceeds the height of the windows because some users do use them.
I do not want to install any 3rd party controls if possible. The owner will not buy anything anyway. I don't mind something that downloads with the page.
I was thinking of trying to make a scrollable div with textboxes or labels but thought I should check to see if someone has already run into this issue and came up with a solution.
I asked here: How to make a scrolling table with dynamic data
but no one has a clue as to whats wrong.
Then I asked here: How to get a table to fit its parent container?
And the key here seems the column widths. But without the widths using the table seems pointless.
Asking this: Why don't my column headings line up?
Seems also to indicate that a table will never work.
Setting this:
display: table-row-group
Makes the column headings line up, but then the table can not scroll.
display: block
Makes the table scroll but the column headings are wrong.
Here's an example that works on its own. http://jsfiddle.net/kjzcv9g2/
<style type="text/css" media="screen">
table, th, td {border: solid;}
thead {
display: block;
color: #f00;
background: #eee;
height: 35px;
overflow-y: scroll;
}
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
th, td {
width: 10em;
font-weight: normal;
}
</style>
<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
But getting this to work seems impossible.
Any suggestions on whether to use labels or textboxes to create my own table?
JSFIDDLE
If I understand the question correctly the above should work. Add a min-width to the overall table and you'll have fixed width columns below the min width, and the columns will fill the container about the min width.
I'm trying to make a table let's say 400px height, and I want this value to never change when I modify the height of table rows with `Javascript? Is there any property that allows height of rows never to be bigger than a certain value?
I am not sure what exactly you are looking for. From your question I can guess that your table should not exceed more than 400px height even your total rows contains height more than 400px.
As per my understanding I would suggest you to put your table into div (having height of 400px and and overflow auto) as mentioned in below example :
<div style="max-height:400px;overflow:auto">
<table>
<tr style="height:500px">
<td>
Spider Code
</td>
</tr>
</table>
</div>
[Note: You can remove height from tr. I have put it just to indicate overflow.]
As per the above solution, if height exceeds 400px then scrollbar will be displayed.
And if you want your row height never exceed more than some pixels then set the max-height to row as mentioned below.
tr
{
max-height:20px;
overflow:hidden;
}
What ever you set in tr's height in javascript it is meaning less if it exist the max-height. so give max-height property to your tr which will restrict you tr to grow more than max-height.
use css max-height property for the table
tr{
max-height: 20px;
overflow:hidden;
}
table{
max-height:400px;
overflow:hidden;
}
I have the following code:
<div style="max-width: 100px; overflow: scroll">
<table>...</table>
</div>
I want to limit the size of the div, but have the table stretch as far as it wants (i.e. ignoring the max-width attribute of the parent div. How do you do this? Currently the browser resizes the table in attempt to follow the max-width...
In CSS file:
div {
overflow: visible;
}
You can't use the position: absolute; for the table element because it doesn't ignore the div...the div ignores IT. If you don't have something filling up the div underneath the table it will not show at all.
PS - I said to put in the CSS file on purpose. I see he has it in his HTML but you should rarely put CSS styles in HTML files. Using a .css centralizes and standardizes across the site and all that has to be set are classes and ids.
Set the position of the table to absolute, then it will not be constrained by the parent div
<div style="max-width: 100px; overflow: scroll">
<table style="position:absolute;">...</table>
</div>
I have the following table. The problem is that when you zoom in/out or when the resolution is different, the headers change size. How can I make them stay constant? I want everything to be on one line only. Currently, if there's more than one word in the header (i.e. Response Comment Num) and the headers change size - words bunch up together one underneath the other.
<table border="1" style="width:100%;border-collapse: collapse;" cellSpacing="2" cellPadding="2" >
<tr>
<th style="border:0px solid gray;background:#AAAAAA;color:white;font-weight:700;width:10%">Response Komment #</th>
<th style="border:0px solid gray;background:#AAAAAA;color:white;font-weight:700;width:60%;">Comment</th>
</tr>
</table>
You can add
white-space: nowrap;
to your "style" attributes (which probably should be in some separate CSS file).
Give the first header more width to avoid wrapping, e.g. width: 40%.
You may specify an additional min-width, e.g. min-width: 13em to avoid wrapping on small screens.
Alternatively, you could use white-space: nowrap; to avoid line-breaks alltogether, then control the overflow behaviour with overflow: visible/overflow: hidden.