I am building an HTML table and using Internet Explorer 11. In each TR are several TD with embedded elements of varying size. I inspected the page through IE DOM Explorer and think I know what is going on. Generally the textarea is the largest element (at 167px as per the CSS) but sometimes one of the other td elements will be bigger (say td1=300px). The problem I have is that I want the text area to fill out to 300px. I can see though that the height is inheriting from td id="td3" which is still 167px. Is there a way I can get td id="td3" to get the height from the largest sibling td in a tr.
The HTML looks something like this
<thead>
...
</thead>
<tbody>
<tr>
<td id="td1">[Dynamic Text1]</td>
<td id="td2">[Dynamic Text2]</td>
<td id="td3"><textarea class="ta"></textarea></td>
</tr>
<tr>
...
</tr>
<tr>
....
</tbody>
CSS
.ta{
height: 100%;
min-height: 167px
}
One thing is I notice Chrome does what I want but I would prefer a solution that conforms with the standards
Make sure you don't have HTML errors (try validating with w3.org validator). That is often the cause of display bugs that crop up between different rendering engines. Anyway, your example seems to work fine here:
td {
min-height: 200px;
background: lightblue;
vertical-align: top;
}
textarea {
display: block;
height: 100%;
min-height: 50px;
}
http://jsfiddle.net/Kg3P5/2/
Related
This isn't actually an order form (as yet) but I think that best describes it. I want to create a grid of 3 images inline, then text below each, then repeat indefinitely. I tried turning each row into a unique table but alignment became a problem. Then I tried making one table and giving the image and text < tr >'s unique classes, but I'm having trouble getting the height of the text rows to shrink to a more aesthetically pleasing size, and also centering the text below the image. I tried to do this artificially with as many "& nbsp's" as was appropriate, but then the text started wrapping onto a new line and it messed all that up. Code and link to js fiddle below:
<table id="saladGrid">
<tr class="saladPics">
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr class="saladText">
<td class="text"><p> acorn squash, golden beets, pistachios</p></td>
<td class="text"><p> roasted eggplant, herbed ricotta, sumac</p></td>
<td class="text"><p> arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
http://jsfiddle.net/jshweky/5bTW8/
(On a side note, I'm new to stackoverload so if there's any protocol I'm not following with respect to posting, I'd be grateful for any tips/suggestions. Thanks!)
Have a look at this: http://jsfiddle.net/EX9f9/
If you have a look at the code below you'll notice a couple of things:
HTML
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td> //I changed your classes 'one','two',etc
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
<td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
<td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
</table>
In your HTML I changed your id's one, two, etc to classes consisting of the same word/letter, only a different number, for better readability. (Those could also be ID's btw, the main point is the use of equal terms with only one differentiator)
CSS
table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
vertical-align: middle;
}
#saladGrid {
width: 600px;
height: 400px;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
width: 350px;
height: 350px;
background-position: center;
background-size: 350px 350px;
background-repeat: no-repeat;
border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}
In your CSS I removed all the repeated declarations and put them together in one overlapping class. Now, only the background-image has a separate rule for every separate element.
I removed a couple of rules you don't need (and probably added in an failed attempt to style the table to your liking).
At the start I added two rules: table and td. Those are two general classes I always put at the start of my CSS, it's alright if you overwrite some of it later by other rules, these just ensure that the browser doesn't doe any funky business.
I put the whole table in a div, to show you how to contain the size of a table (but notice that the height is still more than the 400px I gave it).
Notice the text-align:center; and vertical-align: middle; in the td rule. These alight your text horizontally and vertically. (The answer to your main question)
IMPORTANT: vertical-align:middle; only works on tables, no other elements. Keep that in mind!
About your first problem:
"...trouble getting the height of the text rows to shrink to a more aesthetically pleasing size..."
This is unfortunately a property of the table: it will form itself to the content and the space it has on the page. It will fill every inch it gets and will automatically stretch to fit the content. You CAN NOT (as far as I know) limit the size of one row of a table.
Only solution would be to put the table in a div and limit the height of the div so that the whole table gets squished together, and even then I couldn't tell you for sure how the table will behave.. you push it in a tiny corner, there's no telling what it will do:)
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
Table cells by default fit to their content and ignore your width.
Other possibility to the already provided answers:
Surround the text with some other container:
<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
And change its width:
$('#c00 div').width(30);
You have a few issues:
table-layout: fixed tells the columns to be equal.
Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.
Finally, width should be "30px" (in quotes).
Hope that helps.
Try this:
$('#c00').css("width","30px");
or this:
<td id="c00" style='width:30px'>
If you are using IE, you may need to have Compatability Mode on. Also, make sure you are importing the proper jQuery plugin.
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
td.block {
border: 1px solid black;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.
Looking at the image below, the first image is what the markup produces. The second image is what I want.
I'm not sure if I understand your question, but I'll take a stab at it:
td {
border: 1px solid #000;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
Setting
max-width:100%;
white-space:nowrap;
will solve your problem.
For me, this is the best autofit and autoresize for table and its columns (use css !important ... only if you can't without)
.myclass table {
table-layout: auto !important;
}
.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
width: auto !important;
}
Don't specify css width for table or for table columns.
If table content is larger it will go over screen size to.
There are many ways to do this!
correct me if I'm wrong but the question is looking for this kind of result.
<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>
The first 2 fields will "share" the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
If you are happy to let text wrap you can move white-space:nowrap; to the style of the 3rd field will be the only way to start a new line in that field.
alternatively, you can set a length on the last field ie. width:150px, and leave percentage's on the first 2 fields.
Hope this helps!
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
One option is to replace table with CSS4 flex divs:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
First, setting
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
ensures that your your table cells will stretch.
Now you only need
td.fit {
width: 0;
min-width: fit-content;
}
on your fitting cells.
Note that now the table will only overflow in width if content of all fitting cells is too much to fit into a table-width of 100%.
table {
white-space: nowrap;
width: 100%;
}
td {
border: 1px solid black;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
td.fit {
width: 0;
min-width: fit-content;
}
<table>
<tr>
<td class="stretch">this should stretch</td>
<td class="stretch">this should stretch</td>
<td class="fit">this should be the content width</td>
</tr>
</table>
Simple :
<div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to
I have a <table> with <thead> and <th> tags.
Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.
In Firefox it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. If I remove the background image of <th> then the background image of <thead> appears.
Any suggestion?
EDIT:
Here is my simplified code:
<table>
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
<th>CCCC</th>
</tr>
</thead>
<tbody>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody>
</table>
<style>
thead {
background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
}
th {
background: url(PATH TO MY IMAGE) no-repeat left center
}
</style>
Starting from this question and modifying the answer:
<style>
table {
border-collapse: collapse;
background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
}
tbody {
background: #fff; /* This covers up most of the <table> background */
}
th {
background: url(PATH_TO_TH_IMAGE) no-repeat left center;
}
</style>
Gives a reasonable approximation of what you're probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn't check Opera/Chrome/Safari/IE8 though.
You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don't litter your CSS with IE7 kludges.
This is just one of IE's table-related bugs...
I suggest adding display:block; to thead, or styling "thead tr" instead.
This isn't a complete solution, but I can't post comments yet.
IE seems to apply the thead rules to the th elements. Change the 'repeat-x' to 'no-repeat' and set the width for th and td to something much wider than your background images and remove the th background image. You'll see the thead image repeated in each th ... So when you enable the background image for th, you're essentially overriding thead's background image. This is definitely not correct behavior, but there you go.
So, if you can, the best option might be to just back off and get that background image in there some other way. Maybe you can apply it to the table instead and use 'top' to position it?