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.
Related
I am using table (angular-4-data-table) which displays the rows. I wanted to have a vertical scrollbar with header fixed. I tried to add style= position: fixed; to the
<thead> section. I can see the fixed header, but when I scroll through, the table data section was moving on top of the header.
<table class="table table-condensed table-bordered data-table">
<thead style= position: fixed;>
</thead>
<tbody>
</tbody>
</table>
Is there any style that I can apply on tbody so that when scroll happens, it hides beneath the header.
tbody tag is relative so it will just operate as every other element in the page.
You should work only on the "special" element (thead) in order to let the browser works with the highest number of common element possible.
Have you tried giving z-index:999; as thead style?
Ok, now I remember how to do that.
Inside each <th> insert a <div> with the content of the column header, than using CSS you must set the div position absolute over the table and the th with 0 height.
Plus, you must give to a <div> containing the table a top-padding to leave the space for the fake <th>
It's not a nice code, but it works without JS.
<style>
.container { padding-top: 50px; }
.inner { height: 100px; overflow-y: auto; }
.t { width: 100%; table-layout: fixed; }
.t thead th { height: 0 !important; }
.t thead th > div {
position: absolute;
height: 50px;
line-height: 50px;
top: 0;
}
</style>
<div class="container">
<div class="inner">
<table class="t">
<thead><tr>
<th><div>col 1</div></th>
<th><div>col 2</div></th>
</tr></thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a regular table with table rows that are generated with ngFor loop.. the issue is the following: Even though I have set css of table-wrapper to max-height: 450px and overflow-y: auto; , it doesnt matter, that div gets the scroll needed, but my entire page, entire body element, has the height of that table with every single row... Anyone had similar issue?
.table-wrapper {
display: block;
max-height: 450px;
overflow-y: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<div class="table-wrapper">
<!-- I'm reproducing the DOM after Angular ng for -->
<table>
<tr *ngFor="let s of something">
<td>Some content</td>
</tr>
</table>
</div>
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
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.