I have the following markup:
<table class="someclass">
<thead>
<tr>
<td>
<div>
<h1>Click to change height</h1>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>(repeated many times)
<td>some text</td><td>some other text</td>
</tr>
</tbody>
</table>
and the following styling:
tbody {
display:block;
overflow:auto;
}
table {
height:200px;
}
currently the <h1> has some jquery that ultimately changes the height of its parent (and i'd assume the height of the <thead>.) The <table> should maintain it's height and the <tbody> should shrink to fit. currently what I have is working in webkit (chrome and safari) and failing miserably in IE and Firefox. most questions I see have the reverse issue and I am perplexed as to why this is happening.
edit here is the jQuery:
$(".someclass h1").click(function(){
$(this).parent().css("height", "150px");
});
http://jsfiddle.net/kXCX6/2/ (this is behaving the way I want, my code is not behaving this way even though it is structurally identical)
Related
When I am using
.right-align {
text-align: right !important;
transform: translateX(-40%);
}
The Table structure is showing below
<table>
<thead>
<tr>
<th>Bid
</th>
<th>Offer
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="right-align">
200
</div>
</td>
<td>
<div class="right-align">
221
</div>
</td>
</tr>
</tbody>
</table>
The td is overlapping the th element as seen below
How can I can make it go under the header ?
This is happening when table is scrolling
It is very hard to answer the question as it is, however, the table should keep its proportions and structure as long as you keep the code tight:
.right-align {
text-align: right !important;
}
<table>
<thead>
<tr>
<th>Bid</th>
<th>Offer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="right-align">200</td>
<td class="right-align">221</td>
</tr>
</tbody>
</table>
It is nebulous why you decided to use the transform: translateX(-40%); rule in there, but it seems you may be trying to overwrite some rules that come from a theme hence the problem you are facing; If you update your question and add more pieces of code or at least what you are trying to achieve then i could be more helpful :). Also if you are using a framework or theme specify which one.
EDIT.
I saw your updates, you don't need to add a div within the td element to apply a class, you can do it directly in the td element. However, it seems that some css rules are overlapping. Maybe a screenshot of the results in a browser could be helpful.
I've got a basic HTML table that uses rowspan.
CSS
html, body{
height: 100%;
width: 100%;
}
table, tr, td{
border:1px solid #f00;
border-collapse: collapse;
}
HTML
<table>
<tr>
<td>top image</td>
<td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
<td>bottom image</td>
</tr>
<tr>
<td>image</td>
<td>text</td>
</tr>
<tr>
<td>image</td>
<td>text</td>
</tr>
<tr>
<td>top image</td>
<td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
<td>bottom image</td>
</tr>
JS Fiddle
http://jsfiddle.net/38ro2p39/1/
In Firefox (36), Chrome (40) and IE10 it looks like I'd expect that the "Top Image" and "Bottom Image" cells are of even size.
In Safari (5.1.7 for Windows) the "Top Image" cell is the height of it's content, and "Bottom Image" fills the rest of the space.
I don't want to specify any sizes for rows/columns as the content changes size and needs to stretch.
Any ideas why this happens, or how I can get around it?
Thanks!
PS. I'm up for alternatives to tables. I did look at using <div> with table-layout but it lacks rowspan.
EDIT
Thanks to Pete for pointing out Safari for Windows is ancient. A friend using Safari 7.1.2 for Mac OSX confirms the issue still occurs in that version.
According to the spec:
CSS 2.1 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.
I can't find a CSS method of fixing this, but I've come up with a JavaScript method, which works for your code:
var td= document.querySelectorAll('tr td[rowspan="2"]');
for(var i = 0 ; i < td.length ; i++) {
if(Math.abs(td[i].offsetHeight/2 - td[i].parentNode.children[0].offsetHeight) > 1) {
td[i].parentNode.children[0].style.height = td[i].offsetHeight/2 + 'px';
}
}
Basically, it gets all tds having a rowspan, and it sets the other td in their row to be half their height.
Working Fiddle
I have the following code to display comparison of items
<table>
<tr> <!-- Iterating over list of Headers -->
<td>
<div class="Header"><h4>Header Value</h4></div>
<div class="HeaderList"><span>Key</span> <!-- Iterating over list of keys-->
</td>
<td> <!-- Iterating over multiple items -->
<div class="Header"></div>
<div class="HeaderList"><span>Value</span> <!-- Displaying Value next to the key by iterating over them-->
</td>
</tr>
</table>
I want to align the divs with class "Header" and "HeaderValueList" across multiple td.
The value in Header can extend to multiple lines if needed.
I want to set a maximum height for "HeaderKeyList" and "HeaderValueList" not to cross 32px but if its less than that, the height should be dynamically variable and should align across tds.
I have the following css
.HeaderList
{
width:100%;
height:auto;
max-height:32px;
overflow: hidden;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.Header
{
width:100%;
}
When any of the value spans across multiple rows, my alignment goes awry. Please help. I am open to making changes in javascript as well.
Thanks in advance.
To group rows in a table together, you use tbody. One tbody for each of the lists. So the HTML becomes
<table>
<thead>
<tr>
<th></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value1</th><td></td><td></td>
</tr>
<tr>
<td><div class="HeaderKey">Key1</div></td>
<td><div class="HeaderValue">Item1Value1</div></td>
<td><div class="HeaderValue">Item2Value1</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key2</div></td>
<td><div class="HeaderValue">Item1Value2</div></td>
<td><div class="HeaderValue">Item2Value2</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key3</div></td>
<td><div class="HeaderValue">Item1Value3</div></td>
<td><div class="HeaderValue">Item2Value3</div></td>
</tr>
</tbody>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value2</th><td></td><td></td>
etc, with this result:
See fiddle.
I made one of the values a bit wider, to demonstrate that if you make the window narrower, the div will grow to two lines, and the cells to the left and right will remain lined up (vertically centered; but you can change that) and if you make the window narrower still, the div doesn't grow to more than two lines because of the max-height.
I have small generic table which looks something like this:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
I want to be able to click on each table data to expand additional information. Can I do this using only css or do I have to resort to javascript?
You probably will want javascript (and definitely will if you intend the item to stay open after being clicked). But to demonstrate there are instances where it can be done purely with CSS, this will work in CSS3 browsers (only while holding down the mouse button).
See the fiddle.
HTML
<table>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
</table>
CSS
td {
vertical-align: top;
}
td > div {
height: 0;
overflow: hidden;
}
td:active > div {
height: auto;
}
I don't think you can achieve this with css.
But with jQuery's slideToggle(), it's a piece of cake!
I've got a table that displays fine in Chrome, IE8, and IE9. In IE7, however, the table ends up being much wider than its content (100% of containing element?). How do I make the table only as wide as its content in IE7 and IE6 (and continue to display fine in newer browsers)?
Here's the table:
<table class="SisSubDetailTable">
<tbody>
<tr>
<td>Date:</td><td>10-16-11</td><td>SOID:</td><td>SUST — Sustaining </td>
</tr>
<tr>
<td>Status:</td><td>25 characters' worth of data</td><td>Work Order:</td>
<td> </td>
</tr>
<tr>
<td>Company:</td><td>6K8 — KAPCO</td><td>Sub:</td><td>9999 </td>
</tr>
<tr>
<td>Store:</td><td>34 characters' worth of data</td><td>Export Price:</td>
<td>$0.00</td>
</tr>
<tr>
<td>Class:</td><td>26 characters' worth of data</td><td>Control Ship:</td>
<td>N</td>
</tr>
</tbody>
</table>
The following CSS seems to make the cells narrow, but the table as a whole is still much wider than 400px:
table.SisSubDetailTable
{
width: 400px;
}
table.SisSubDetailTable td
{
border-width: 0;
width: 100px;
}
You should set its width property in css. Use guess and check to figure out how big you want it.
If you are not already doing so, set the value in pixels and avoid other units.