I have a table where one of the cells is like this:
<td>
<div class="table-wrapper">
<table class="inner-table">
<!--content-->
</table>
<div>
</td>
The div is there so I can put a border around the table, with a gap of 10px. As it displays, though, the div is the entire width of the enclosing td. What I would like is for it to be just the width of the table it wraps (plus margin, to be specified). I can't figure out the CSS to do this, simple though it no doubt is, although I've got it working with Javascript - but I would prefer to do it using CSS, if possible. I had hoped setting width:auto for the div would work, but it makes no difference,
One way is to use inline-block
<style>
.table-wrapper {
border : 1px solid black;
padding : 10px;
display : inline-block;
}
</style>
<table width="400px">
<tr>
<td>
OUTER
</td>
<td>
<div class="table-wrapper">
<table class="inner-table">
<tr><td>INNER</td></tr>
</table>
<div>
</td>
</tr>
</table>
Related
I expected all browsers behave the same, which is setting all tds in a table to the width of the largest width indication of all tds.
Take a look at the following examples:
https://jsfiddle.net/rpkbf4n6/
=> This one is displayed correct in FF/IE but wrong in Edge (the very long text is not wrapped)
https://jsfiddle.net/8oa4fw2u/
=> This one is displayed correct in FF/IE/Edge
Why is this? I don't like to give all tds the width attribute and I don't like to give the width attribute to the largest content td (because the content is filled dynamically, so I don't know which is the largest)
Add a DIV above the table and use table-layout: fixed then it works with Edge
<div class="wrap">
<table class="table">
<tbody>
<tr>
<td style="width:100px;">
<span>Text</span>
</td>
<td>
<input style="width:160px;">
</td>
</tr>
<tr>
<td>
<span>Very very very very very long text</span>
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
.wrap {
width: 500px;
}
.table {
width: 100%;
table-layout: fixed
}
I have my table elements defined like this in my CSS:
table.index td{
width: 20%;
min-width: 20%;
}
But if there is not enough text to fill one whole line my table cells shrink! Why do this happen? I used min-width...
I don't like other anwsers on the forum where they use fixed width in px like here. I would probably go with this solution (I mean fixed table elements) if I could add a customized and stylish horizontal scrollbar to my table. Maybee this would be even better.
My table looks like this:
<div class="index">
<table class="index">
<tr>
<td>
event 1
</td>
<td>
event 2
</td>
</tr>
<tr>
<td>
event 6
</td>
<td>
event 7
</td>
</tr>
</table>
</div>
I have problem with absolute positioning DIV over the table element. I have a DIV that’s set the position absolute and set the top position to display the exact place. Now what happened in chrome browser while zooming (ctrl +) the DIV position has been changed at zoom level 125, 150, 175 ... etc. But Zoom level 100,200, 300… (Multiple of 100) it’s displayed the same position. The problem was other than the multiple of 100 zoom level the DIV position changed. How can I fix this issue ?
I have created the sample page in jsfiddle - demo . please run the page in chrome browser and zoom the browser ( ctrl + ) the red color DIV position will be change, this is the issue. I really hope someone find a solution for this.
HTML :
<div class="container">
<table width="700px" class="custom">
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<div>
<div class="apptest"> </div></div>
CSS :
table
{
border-collapse:collapse;
}
.custom tr td
{
height:20px;
border:1px solid;
background-color:White;
}
.container {
position: relative;
}
.apptest
{
height:70px;
width:400px;
position:absolute;
top:185px;
left:0px;
background-color:Red;
}
Link : http://jsfiddle.net/mJcsb/5/
Use a container with a style like this;
.Container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
I'm not going to debate whether tables are a poor choice or not these times. But an absolute positioning here is a pretty bad idea.
I don't know what you have to do and what is your aim, but you could have a different (and probably better) solution using divs; in that case, a div containing your "red" div would just.. contain it, heh!
If you want to go anyway with absolute positioning and tables, be aware that this is a dirty solution and could break anytime. In that case, I'd suggest you to go with percentage-based absolute positioning, so that the box flows with the zoom (that is, by the way, difficult to predict and normalize in every browser).
i.e.
.apptest
{
height:70px;
width:400px;
position:absolute;
top:61.2%;
left:0px;
background-color:Red;
}
A fork of you fiddle with percentage for absolute positioning (POOR SOLUTION WARNING HERE): http://jsfiddle.net/U4TGd/
Keep in mind that, again, this is a bad solution and mixing percentages and pixels in often a bad idea. If you have time or possibility, convert your table-based design and use divs instead of tabs.
Its not the div position which was changing, the one which our eye relates the div position was changing(in this case the table border of each cell).
I found out this with some testing,
use this css to know that the absolute position div is in exact position.
.custom tr td {
height:20px;
border:0px solid;
}
.container {
position: relative;
height:185px;
background:#0F6;
}
.apptest {
height:70px;
width:400px;
position:fixed;
top:185px;
left:0px;
background-color:Red;
}
So you have no problem with absolute positioning DIV, but maybe chrome rendering the table cells differently.
I am having a table as follows:
<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>
</tr>
</table>
The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change and even if the extra texts are not shown it`s fine.
I also want the height of the rows and columns to be of 3 lines of text and fixed in height.
First off, the code was incorrect. Here's your code corrected, try does it work what you wanted it to:
<table>
<tr style="height: 10px;" >
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
</tr>
</table>
Second, the way you're styling is very old-school and hard on you, try creating a CSS class which you can then apply to every element, no need to repeat the rules. In fact, if this will be the only table on your page, you can put something like this inside head:
<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>
That will apply your rules to all tags on page, so you don't have to explicitly style each and every one.
Or you can do:
<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>
<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>
That way you control your styling from one place, and are also able to apply it to other elements as you see fit.
If there's anything else, ask away.
EDIT: And for fulfilling your requirement of widths being fixed at cost of extra content not showing, apply both answers of Guzzie and QQping. Although if you're ok with varying height, you don't have to set overflow:hidden;
You should set the table's style to fixed like this and add the total width of the table
<table style='table-layout:fixed' width='300px'>
Firefox may not like to see table cells with overflowing long texts cause of fixed column-widths, to better display this you should set the following TD style in your css or on your current page
<style>
td {overflow:hidden;}
</style>
Simply add max-width with to your table cell.
<style>
.special p { display:none; }
.special:hover p { display:block; }
</style>
<table>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
<tr>
<td style="width:200px">Things</td>
<td style="position:relative; width:220px">
<div style="position:absolute;right:0" class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
Can I make this work? Ie, can I make the #special p expand over the top of 'Things'? As I currently have it set up #special won't ever grow outside the 220px wide td. Any ideas?
I am still not fully clear, but try this. This will allow the TD to grow when the content is displayed.
<table>
<tr>
<td style="width:200px">Things</td>
<td style="text-align: right;">
<div class="special">
<img id="shows" />
<p>Variable width upto, say 600px (Will be hidden until this td is :hovered</p>
</div>
</td>
</tr>
</table>
I'm not 100% sure what you are trying to achieve, but wow about taking away the position: relative from the td and making the .special p s position: absolute but not the special elements themselves?
That way, your special elements will be in the normal table flow, and the paragraphs popping up will leave the table cell's boundaries.