I have a div with position absolute and width:100% inside a table cell and the width is calculated to window width not to table cell width. The table cell width is also variable so I need that the width of absolute div to be the same as table cell width. How can I do that?
From w3schools.com
An absolute position element is positioned relative to the first parent element that has a position other than static.
That part often gets overlooked I think.
So, try setting the td to position:relative and see if that gets you what you are after.
This is the way I got this to work:
<table border="1" class='rel'>
<tr>
<td><div class='abs'>row 1, cell 1</div></td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
* { margin: 0; padding: 0; }
.rel {
position: relative;
}
.abs {
position: absolute;
background-color: red;
top: 1px; /* offset because of table border */
left: 1px;
}
Notice the relative style is applied to the table not the tr or td. When I applied it to the td (what i expected was going to be necessary) it did not work in Chrome. Here is a jsFiddle for you to play with:
http://jsfiddle.net/bNweT/1/
Hope this helps.
Bob
I believe that this can be done only via JavaScript.
Update
I tried width: auto;, but if it has position absolute it does not take the width of the parent element in DOM.
(I am testing in Chrome and Firefox)
Related
I feel like I'm missing something. I have a <table> set to width: 100%; and I add CSS to prevent a column from becoming narrower than 50px. It is a simple scenario.
My problem is that the column which has min-width applied gets wider even when if it is already wider than the min-width value.
Example of problem: I apply min-width: 50px; to a td element which has a width of 123px, the td increases to a width of 167px. I expected applying min-width: 50px; to an element with a rendered width of 123px to not change the elements width.
My problem can be reproduced by running the below code and following these steps:
Check the width of the first column of the table
Verify that the column has a width greater than 50px
If the first column has a width less than 50px, increase the width of your browser window.
When the first column has a display width greater than 50px, click the button below the table.
The width of the first column should increase, despite not being smaller than the min-width value.
NOTE: Clicking the button will toggle a class applied to the table cells (th and td elements) which form the first column of the table. The class applies min-width: 50px;.
This problem will be considered solved by any solution that does not affect the calculated width of a table cell (th or td) with a calculated width greater than 50px and style property width: auto; when setting min-width: 50px.
I am using Google Chrome Version 46.0.2490.80 m.
Any help/insight would be greatly appreciated. Thank you.
$("button").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
table {
width: 100%;
}
table,
table * {
border: 1px solid black;
}
.min-width-test {
min-width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
<button>Toggle min-width on first column</button>
CSS has no specification for how min-width and max-width are handled by tables, inline tables, table cells, etc. The behavior you are seeing is how Chrome somewhat arbitrarily handles it.
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
CSS 2.1
This hasn't been changed in any later specs.
As Matt mentioned in the comments, adding min-width is going to increase the size of the column. Tables auto-adjust their size based on their content, and adding a min-width of 50 will thus increase it by 50.
I've copied over your code and made it so you can visualize what's happening. Adding a min-width of 50px is like adding an invisible element of width 50 in there (which I've conveniently made un-invisible and colored red). If you want to counteract that, try removing some margins or padding (although this may break your design--can't tell without seeing exactly what you're doing). Press the "Toggle fix on first column" button to see what I mean.
$("button").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test")
});
$("#b2").click(function() {
$("table tr > *:nth-child(1)").toggleClass("min-width-test-fixed")
});
table {
width: 100%;
}
table,
table * {
border: 1px solid black;
}
.min-width-test:after {
content: '';
width: 50px;
height: 1px;
background: red;
display: block;
}
.min-width-test-fixed:after {
content: '';
width: 50px;
margin-right: -50px;
height: 1px;
background: green;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
<button>Toggle min-width on first column</button>
<button id="b2">Toggle fix on first column</button>
I am trying to build a table that contains a td which has a width set in percentage and when overflown a horizontal scrollbar.
Unfortunately I don't manage to make this happen.
http://jsfiddle.net/ne45s2wf/1/
HTML
<div class="container">
<table>
<tbody>
<tr>
<td>cell 1
</td>
<td>cell 2
</td>
<td class="too-long">cell 3 loooooooooooooooooooooooooooooooooooooooooooong
</td>
</tr>
</tbody>
</table>
</div>
CSS
.container {
position: relative;
max-width: 500px;
background-color: red;
}
table {
width: 100%;
}
td.too-long {
background-color: darkgreen;
display: inline-block;
width: 20%;
overflow-x: scroll;
}
First thing I wonder is what is the td-width in percentage relative to? And is it possible to set it to be relative to the table?
I would set a maximum width in percentage for the td with overflow hidden. While this works for the td, the parent containers do not align their width to the td child when its width is set with percentage. The parents width is as if the child did not have any width set. Furthermore the table now is not "responsive" any more.
I would take a look at bootstrap. I am not sure exactly what you mean but it seems like you are having trouble with your tables overflowing. Bootstrap has responsive tables which will scroll in the way you specify at small sizes. Take a look at this:
http://getbootstrap.com/css/#tables-responsive
I have an issue, described in title. I have a table, div inside td of this table.
I want to position this div relative to table row, so I set tr position to relative and div position to absolute. It works fine in Firefox, but in IE it works unexpectedly for me.
There is a code:
<div class="container">
<div class="panel"></div>
<table>
<tbody>
<tr>
<td>a</td>
<td>s</td>
<td><div class="problem-div">i'm here</div></td>
</tr>
</tbody>
</table>
table {
border: 1px solid;
table-layout: fixed;
width: 100%
}
tr {
position: relative
}
.panel {
height: 50px;
background-color: red
}
.problem-div {
position: absolute;
top: 0;
left: 0
}
There is fiddle
http://jsfiddle.net/L7nczrsp/5/
Help me to understand what I'm doing wrong, please.
UPDATE1
Thanks to #James we now know that position for table elements is undefined http://w3.org/TR/CSS21/visuren.html#propdef-position
But, we can set td position to relative instead of setting this styles to tr. It works fine. But it still conflicts with w3.
But Thanks to #ShabanKhan for idea, we can put relative positioned div into td and put our problem-div into this div. Seems to work. There is updated fiddle http://jsfiddle.net/meatwas/akkLxjpp/1/
Positioning do not work on table properties try to add a div to make it position relative.
If you add position: relative to the table, so it works well in Chrome, FF and Safari
There is your on jsfiddle example with this idea.
Given a <table> with one or many <td>'s with text that is wider than the parent <div>, is there a way to make the table scroll without making the parent <div> use overflow:auto, and still have the table retain 100% width?
I'm hoping for a CSS solution I can apply to ONLY the <table> element (or its children).
Example: See JSFiddle Demo.
CSS:
<style>
#wrapper {
width: 250px;
/* looking for solution that doesn't use overflow auto here */
}
table {
border-collapse: collapse;
}
td {
border:1px solid #ccc;
padding: 3px;
}
</style>
HTML:
<div id="wrapper">
<p>Table should scroll, but not this text.</p>
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>..</td>
<td>..</td>
<td>....................................................................................</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
</div>
Not modifying the parent div is important in my project because <table>'s are in a <div> with a bunch of other content that I do not want to scroll with it. While I could add a wrapper <div> to all tables in my project, I would also have to rewrite a JavaScript plugin (has to do with paging), which I am trying to avoid.
You can use overflow: scroll on the table itself if you make it display as block:
table {
display: block;
overflow: scroll;
}
Edit:
As the comments below suggest, use td { width: 1%; } as a somewhat-messy way to get the table to still be 100% width if the content is narrower than the wrapper.
Fiddle: http://jsfiddle.net/94g53edb/12/
I am just a newbie in css and html, but if I can give my opinion, so there will be two ways in achieving that:
You can set the <p> to the fixed position,
or
You can create another wrapper for the table.
:)
[I'm adding a second answer because the comments on my first answer are going in a different direction than my new answer, and I don't want to derail that train]
Set the table to display: block and overflow: scroll, and give each of the cells a min-width (in pixels) to make up 100% of the container's width.
Here's what it looks like with table content less than the container width: http://jsfiddle.net/94g53edb/8/
Because the cells have only a min-width and not a fixed width, they can expand as needed, pushing the table to greater than the width of the container, and the table will scroll: http://jsfiddle.net/94g53edb/9/
Quick question. I have a table, it has a border. When I add padding, it adds the padding from the inside of the table. Any way to make it add padding from outside the border?
Essentially, the table border lines should appear to be within its cell.
Im not 100% sure what you mean but you may want this.
HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
CSS:
body {
padding: 20px;
}
table {
width: 400px;
height: 400px;
outline:2px solid red;
outline-offset: -15px;
}
td {
border:2px solid blue;
}
Table only:
DEMO HERE
Cell only:
DEMO HERE
So here we are setting an outline and you can put an outline-offseton it. So this will bring it into the table if you use - value. Use it as a border but remember it doesn't count towards width or height.
Note: You can use this on each cell etc.
if i understand you right then you should use margin not padding.