I have a table with cell coded as follows
<td valign="top" class="weekend_days">
<div class="block_out">
<div class="blockout_text">Some content ...Some content ...Some content ...Some content ...Some content ...</div>
</div>
</td>
In the CSS, I have defined a height for the div as;
.block_out {height: 50px;}
I have just included the relevant style here.
Now in IE, the cell expands if the content increases, but in Firefox, it does not expand if content is more.
How do I fix this issue (I would not be able to directly remove the height attribute as it is used in multiple places) ?
Try this:
.block_out {min-height: 50px;}
Example min-height: http://jsfiddle.net/35bsF/2/
Example height: http://jsfiddle.net/35bsF/3/
You may want to include table-layout:fixed; in your table-tag:
<table style="table-layout:fixed;">
This will force IE to listen to the dimensions you set. There are quite a few similar posts about this on stackoverflow already.
Uses this solution if you don't want your table to expand.
Related
I have a table with 2 columns. The table itself is responsive.
Since usually a row is not filled-up with text (space remains) the extra-space is distributed on both columns.
I want to have the left column as wide as it needs for its content and put the rest including the non-used space to the right column. The reason is that the right column's content changes, while the left column's content is fixed. Distributing the non-used space to both columns let the right column jump with no reason for it. But I cannot express the width of the left column in grid, percent or pixel.
I'm pretty sure that I knew a very easy solution for that simply with html and css. But I'm not remembering it now.
The code has nothing special. Simply take into account, that it contains mustache to fill the right column. Replace it with content whatever you want.
<table class="table">
<tr>
<td>Company</td>
<td>{{company.name}}</td>
</tr>
<tr>
<td>Department</td>
<td>{{department.name}}</td>
</tr>
<tr>
<td>Tags</td>
<td>
<!-- this is replaced with a list of tags -->
{{#associatedTags}}
<span class="tag">{{name}}⊗
</span>
{{/associatedTags}}
</td>
<tr>
…
<tr>
</table>
As you can imagine, adding a tag to the tags row makes the content longer. As a result the right column gets more width. Its left border moves to the left shrinking the extra space on the left column. This looks ugly, because it shows a move without having a non-technical reason for it.
I think this is what you're looking for, although it's not specific to Bootstrap.
.table tr td:first-child {
width: 1%;
white-space: nowrap;
}
http://www.codeply.com/go/OVeCpnFY7Q
Some code will be usefull. Anyway, you could add an extra class for your row and add the following CSS:
.extraclass > .col {
background-color: #FABABA;
width: 200px !important; /* set the desired width */
}
<div class"container">
<div class="row extraclass">
<div class="col">
example text
</div>
</div>
</div>
Hope it helps
Edit 2:
Problem seemed to reside on "bigTable" elements th rules. Apparently th's were inheriting wrong min-width's when used on layout-template. I'm still investigating this.
Still, I'm going to give one more try for divs. One big problem was using fixed nav and dynamic content, but I already found Holy Grail -solution for this (http://alistapart.com/article/holygrail).
Thanks for suggestions & all the lovely trolololo.
Edit:
I replicated this problem to http://jsbin.com/eyitij/4/edit
I have a strange problem with table + td width. I have code similar to this:
<table class="mainLayout" style="width: 100%;">
<tr>
<td style="width: 250px;">
<div id="leftNavigationPanel"> * content * </div>
</td>
<td id="panelCell">
<div class="panel">
<table id="bigTable" width="100%"> * LOTS OF CONTENT, includes big table * </table>
</div>
</td>
<tr>
</table>
When I run this code on browsers, mainLayout is getting overflowed, so it becomes 3600px, and this happens because of big table inside Panel.
Big table I'm referring to can be contained within screen. When done so, it gets horizontal scrollbar (which is what I want). This works if big-table is loaded in separate html-file with rule "width: 100%".
After adding mainLayout a rule "display: block;", mainLayout table is rendered ~1800px and is contained within screen, but problem is that "panelCell"-TD is still ~3400px wide, so I'm still having whole page scrolling... TD isn't contained within table, but always expands to 250px + bigTable.width() !?
Basically browser doesn't know how to calculate "panelCell" to fill only : window.width - leftNavigationPanel.
Any ideas how to make right rules without using javascript + precalculated max-width rule for "panelCell"?
panelCell must be contained within window
bigTable must be contained within panelCell, with scrollbar
Setting table-layout:fixed fixes a lot of weird problems with tables :
<table style="table-layout:fixed;">
<col style="width:250px"/>
<col/>
<tr>
...
In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle
I have the following table in my HTML:
<div style="max-width:700px;">
<table border="1">
<tr><td colSpan="2">this is a loooooooooooooooong text</td></tr>
<tr><td width="1px">a:</td><td >b</td></tr>
<tr><td width="1px">c:</td><td >d</td></tr>
</table>
<div>
I want the first column width in the second and third row to just fit the content length (that is why I put width="1px" there). In the mean while, I want to table width to just fit the length of the longest content in the table (which is the first row) instead of spanning to the max-width of its bounding div.
It works in Firefox as shown below.
However, in IE 9 it does not work as expected, as shown.
I tried to replace width="1px" with width="1%". But then the table width will span to the max-width of the parent div.
Does anyone know how to fix it in IE?
I have just tested in my IE9, and setting the width to 1px works. But it displays as you presented above in compatibility mode. Have you declared your doctype and all other fun stuff?
It might be because you are using older methods to display the table. You could try styling the table with borders and so on in CSS - such as:
table, td, tr, th{
border:1px solid #f0f;
}
.onepx{
width:1px;
}
<div style="max-width:700px;">
<table>
<tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
<tr><td class="onepx">a:</td><td>b</td></tr>
<tr><td class="onepx">c:</td><td>d</td></tr>
</table>
<div>
and so forth - I am sure you get the idea. this might stop it automagically displaying in compatibility view (if it is the problem).
And finally, because IE9 is so stupid, you will have to turn off the compatibility view (if it is enabled on the page), because all pages within the domain will be viewed in compatibility view.
You mentioned that you have tried setting it to 1%, did you set the other to 99%?
<tr><td width="1%">a:</td><td width="99%">b</td></tr>
<tr><td width="1%">c:</td><td width="99%">d</td></tr>
I'm to implement a fullscreen layout for a Web app according to custom specs. I've got most of it under control but there's one part I have some trouble with.
To economize on space in an otherwise already crowded GUI, a "Log out" button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here's a picture:
+====================+=======+
| ACME Widgets | [Btn] |
+====================+=======+
I don't know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:
+==================================================+=======+
| ACME Widgets | [Btn] |
+==================================================+=======+
...with the title continuing to be centered in its area, which again will always be (total available width - width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.
Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?
Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl-+) to blow up font sizes. Therefore, I'd like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I'd like to stay flexible.
I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you've left so far.
CSS approach:
Lets say you determine that a nice width for your button is 5em. This of course scales with the browser's text zoom to always be, well, 5em.
Then perhaps you could float this to the right, and put a margin-right on your title of 5em.
#buttonContainer {
float:right;
display:inline;
width:5em;
text-align:right;
}
#titleContainer {
text-align:center;
margin-right:5em;
border:1px solid blue;
}
<div id="buttonContainer">
<input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
<h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>
This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.
Table-approach:
Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button...
<table border="0" width="100%">
<tr>
<td width="99%" align="center">ACME Widgets</td>
<td width="1%" align="right">button</td>
</tr>
</table>
Good luck!
You can use a floating div.
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets</h1>
Edit: second attempt, using a displayed-but-invisible div with the same button as content to center the title in the remaining space (aka doing math in css :)
<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets<div style="visibility:hidden">[Btn]</div></h1>
If table is acceptaable use that
<table border="0" width="100%">
<tr>
<td align="center">ACME Widgets</td>
<td width="60">button</td>
</tr>
</table>
Might not be the most elegant solution but something like this should work. This is based off Adrian's solution
CSS
h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}
HTML
<div class="logout">Log me out</div>
<h1>ACME widgets</h1>