I'm trying a very simple thing (I thought) but it just doesn't work.
If I set a table style like that:
table {
width: 537px;
height: 19px;
max-width: 100%;
}
<table>
<tr>
<td style="background-color: #ffe129;">text</td>
<td style="background-color: #bdff4d;">text</td>
</tr>
</table>
Then the table width will be 537px even if my window width if 400px.
A div would be 400px.
Adding display:block to the table style breaks the table: see here
I will define the max-width: 537px; for example and then give the width: 100% by this way it will take the max-width which is 537px if you say the width:100%; it will be always respecting the width of the screen and it will not go more than 537px
table
{
width: 100%;
height: 19px;
max-width: 537px;
}
<table>
<tr>
<td style="background-color: #ffe129;"></td>
<td style="background-color: #bdff4d;"></td>
</tr>
</table>
Related
I am using primeng picklist. I found that when the options length in the target or source control are bigger then the picklist control buttons in the middle gets smaller. My picklist code follows
<p-pickList [source]="availableFormula" [target]="selectedFormula" sourceHeader="Available Formula"
targetHeader="Selected Formula" [responsive]="true" filterBy="Name" dragdrop="true" dragdropScope="cars"
sourceFilterPlaceholder="Search by Formula" targetFilterPlaceholder="Search by Formula" [sourceStyle]="{'height':'300px'}"
[targetStyle]="{'height':'300px'}" showSourceControls="false" [showTargetControls]="false" (onSourceSelect)="formulaSelectEvent($event)"
(onTargetSelect)="formulaSelectEvent($event)">
<ng-template let-availableFormula pTemplate="item">
<div class="ui-helper-clearfix">
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{availableFormula.Name}}</div>
</div>
</ng-template>
</p-pickList>
I tried the following in CSS override to make it not shrink but nothing worked.
.ui-picklist-buttons{
width: 100% !important;
}
The problem is not with the width of the buttons.
The problem is that the picklist-buttons and picklist-listwrapper are declared as table-cell and td's increase their width depending on content. ( Unlike a block elements )
If you just want to have fixed column widths use table-layout: fixed on the ui-picklist. If the problem is that one list has a very long word inside it, use word-break: break-word on the picklist-listwrapper or on the ui-picklist-item
See example below
.fixed {
table-layout: fixed;
width: 100%;
}
.buttons {
width: 20%;
background: blue;
}
.list {
width: 40%;
background: red;
}
.not-fixed .list {
word-break: break-word;
}
<!–– with table-layout: fixed but no break-word -->
<table class="fixed">
<tr>
<td class="list">40percent</td>
<td class="buttons">button</td>
<td class="list">veryveryveasasasarylongtextthatdoesntfitin40percent</td>
</tr>
</table>
<!–– with break-word -->
<table class="not-fixed">
<tr>
<td class="list">40percent</td>
<td class="buttons">button</td>
<td class="list">veryveryveasasasarylongtextthatdoesntfitin40percent</td>
</tr>
</table>
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>
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
Images usually have a gap below them. To avoid that, I give them display:block but if I do that in a table, the image goes to the left.
How to have the image in the center and with no gap below it?
(I use inline CSS because I use it in a mail)
I have it here to play: https://jsfiddle.net/rc6jzvx2/
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; text-align:center;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
You can use margin:0 auto instead of text-align to center the image. It works fine with display:block:
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; margin:0 auto;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
You can get rid of the gap below the image and center it by setting the vertical-align property of the image to top and setting the text align to center on the table cell, not the image:
table {
margin: 0 auto;
width: 80%;
}
td {
background-color: gray;
text-align: center;
}
img {
vertical-align: top;
}
<table>
<tr>
<td>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
<table style="margin:0 auto; width:80%;">
<tr>
<table style="margin:0 auto; width:80%;">
<tr>
<td >
<div style="background-color:gray;text-align:center">
<img style="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</div>
</td>
</table>
</table>
EDIT:
If you use it for a mail, as I just read, then it is fine to use the inline-styles.
SOLUTION:
You can just use display: block and margin: 0 auto; in your image for it to center in its container.
You can create a class which you can later on keep using when you need the same style for different images:
.img-center {
display: block;
margin: 0 auto;
}
Also, I recommend you remove your inline-styles and add them in an external css file for separation of concerns and reusability.
JSFIDDLE
CODE SNIPPET:
.my-table {
margin: 0 auto;
width: 80%;
}
.img-center {
display: block;
margin: 0 auto;
}
.bg-gray {
background-color: gray;
}
<table class="my-table">
<tr>
<td class="bg-gray">
<img class="img-center" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
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;
}