The table on this page has a caption with display: table-caption set.
http://www.petersen-stainless.co.uk/lifting/CE-swage-sockets/stainless-steel-threaded-sockets.html
The HTML is:
<table class="product-data">
<caption>
Rated for lifting in accordance with EN 13411-8. WLLs stated based on 90% of wire MBL at a 6:1 factor of safety. All terminals permanently etched with CE mark and batch identification number.
</caption>
<tbody>
<tr>
<td data-th="Product Code">SCM6X3R-EN</td>
<td data-th="Wire (mm)">3</td>
<td data-th="Thread">M6</td>
<td data-th="D (mm)">6.3</td>
<td data-th="L (mm)">97.0</td>
<td data-th="CT (mm)">47.0</td>
<td data-th="WLL 7x19 / 6x19-IWRC">70kg</td>
<td data-th="WLL 6x36-IWRC">N/A</td>
</tr>
</tbody>
</table>`
And the css I used:
.content .product-data {
float: left;
margin-right: 20px;
width: 70%
}
.product-data caption {
display: table-caption;
width: 100%;
margin-bottom: 2em;
border: 1px solid #ccc;
box-sizing: border-box;
border-top: none;
}
It displays at 100% width of the table in webkit browsers but in firefox it is 100% width of the page. How can i get this caption to fit properly in firefox? Is it a bug? It seems like it shouldnt be behaving this way. If so are there any work arounds?
Please try to add
.content .product-data { display: inline-block; }
The issue will get fixed in firefox
Related
The cells on the table on https://dev.meteo.cam/pricing overlapp on small screens:
Granted, this table is a bit special, because I changed the style such that the tbody becomes vertically scrollable.
However, what is confusing is that the code sample below works, using the same CSS styles:
table.table-complex {
width: 200px;
/*added only for this snippet to simulate small screens*/
}
table.table-complex tbody {
display: block;
max-height: calc(100vh - 100px);
overflow: auto;
}
table.table-complex tbody tr,
table.table-complex thead {
border-bottom: 1px solid #ccc;
display: table;
table-layout: fixed;
white-space: normal;
width: 100%;
}
<table class="table-complex">
<thead>
<tr>
<th>Webcam</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>FTP upload <small>(up to every 5 min)</small><sup>1</sup></td>
<td><b>free</b></td>
</tr>
<tr>
<td>RapidFire FTP upload: <small>(up to every 5 sec)</small><sup>1</sup></td>
<td><b>USD 0.99</b> <small>/month</small></td>
</tr>
<tr>
<td>Archive <small>(10 years)</small><sup>2</sup></td>
<td><b>USD 1.99</b> <small>/month</small></td>
</tr>
</tbody>
</table>
Why does the sample above work but not on https://dev.meteo.cam/pricing on small screens?
PS: When I insert the CSS on https://dev.meteo.cam/pricing via Chrome Inspector, it works also!
I checked it in my browser and table.table-complex td has a white-space:nowrap styling element. This is causing the problem you're having. It is part of the tags.css file.
I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
I have a table which has a peculiar style issue when I insert an input element in the header. It does not center the input exactly; instead it is off by 2 pixels on the right side. I have some Twitter Bootstrap styles applied to the table, but I can't find one that is causing the issue so I don't think that has anything to do with it. Here is the markup:
<thead>
<tr>
<th scope="col" style="width: 5%;">
ID
<input type="text" value="" class="grid-filter" id="id-filter">
</th>
...
Here is a picture of the issue (zoomed in considerably):
Here are the styles applied:
th {
width: 15%;
a { display: block; }
input {
height: 15px;
line-height: 15px;
margin: 0;
padding: 5px 0;
width: 100%;
}
}
In the image above, I'm using Firebug and have focused on the "ID" anchor. As you can see, the anchor is correctly centered in the th, but the input box has an extra 2 pixels on the right for some reason. Why is this? The weird thing is that this does NOT affect select elements, only input elements.
Update: When I set the border and outline, Bootstrap's focus glow also has a border. Not sure which style to override...
edit: looks like the problem is your width attribute. Check this JSFiddle
HTML:
<table>
<thead>
<tr>
<th scope="col" style="width: 5%;">
ID
<input type="text" value="" class="grid-filter" id="id-filter"/>
</th>
</tr>
</thead>
</table>
CSS:
a, input {
padding: 0;
margin 0;
}
a {
display: block;
background: red;
}
input {
height: 15px;
line-height: 15px;
/* width: 100%; */
}
table { width: 3em }
The width attribute on the input defaults to auto, which does what you want in this case.
I have some markup like so:
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<tr>
</thead>
<tbody>
<tr class="main">
<td>some content</td>
<td>some content2</td>
<tr>
<tr class="more">
<td colspan="2">
<div class="more-link"><a tabindex="0" href="#">Show more info</a></div>
<div class="more-info">
more info goes here
</div>
</td>
<tr>
</tbody>
</table>
And some CSS:
td, th{
border: 1px solid red;
}
.main td{
height: 50px;
width: 300px;
vertical-align: top;
}
.main td{
border-bottom: 0;
}
.more td{
border-top: 0;
height: 0;
}
.more-link{
position: relative;
top: -30px;
}
.more-link:focus + div, .more-link:active + div{
height: auto;
}
What I want to do is that when the "show more info" link is clicked, the table row called "more" expands.
The problems:
There is no effect if I set the td inside more to have a height of 0;
If I set height of the more-info div to 0, or display:none, the table row still takes up space.
I would like to do this with just CSS, javascript can be used to make it better, but the basics should just work without javascript.
How can I get my more row to expand when the show more info link is clicked?
And a fiddle: http://jsfiddle.net/QJr2e/
Got it!
Instead of using position:relative to move the "show more info" link, I gave it a float:left. This allowed me to move it anywhere I want using margin, while reorganizing the flow.
Instead of using height, I just set more-info to display:none, and then when the "show more info" link is clicked:
.more-link:active + div, .more-link:focus + div{
display: block;
}
I have a DOM structure like the following:
<table class="playlist">
<thead>
<tr>
<th>TH1</th>
<th width="53">TH2</th>
<th width="53">TH3</th>
<th width="53">TH4</th>
<th width="53">TH5</th>
<th width="53">TH6</th>
</tr>
</thead>
<tbody>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
<td>TD5</td>
<td>TD6</td>
</tr>
<tr class="expansion">
<td class="expansion" colspan="6">
<div class="comment_wrapper">
<form>
<textarea style="width=482px" class="mini">x</textarea>
</form>
</div>
</td>
</tr>
</tbody>
</table>
Related style rules are like:
table {
width: 580px;
border-bottom: 1px solid #EEE;
}
.comment_wrapper {
height: 270px;
border: 1px red solid;
overflow-x: hidden;
overflow-y: auto;
}
.comment_wrapper form textarea {
height: 70px;
width: 482px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px red solid;
}
My problem is that whenever I added the second tr, width of table columns changed into a mess like the following in IE6/7.
When I comment out this tr, the column width restore.
Why does adding a tr affects column width? How can I avoid this effect?
PS
I've reproduced this problem on JSFiddle, and this is the link: http://jsfiddle.net/7mYY8/1/
Well, you have 6 columns 5 of which have a defined width.
The 1st column doesn't. This means it has to be computed. Sure you have the table width defined in CSS, but IE 6 isn't exactly the best thing.
Your best bet is going to be to explicitly define the width of all of your header columns. Then give the table the css attribute of "table-layout: fixed". This is going to enforce your widths for the entire rendering of the table.