having trouble with font-size ; demo: http://jsfiddle.net/9QMky/2/
body{
font-size: 20px;
}
input, div{
height: 10px;
width: 10px;
}
Reading this CSS, I hoped to see the very same dimensions for both input and div in this HTML:
<table>
<tr>
<td>
<input type="button"/>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
But they do not: the td containing the input is greater.
font-size seems to be a part of the problem, using property
display: flex;
on the td seems to work. Why?
Note: have played only on Chrome.
Related
Is there any difference at all between having a td with the attribute valign set and having the same TD with the style set to the equivalent "vertical-align"?
I see lots of people saying to switch over, but nobody explicitly saying they are 100% compatible or pointing out the differences.
The deprecated and obsolete valign attribute applies only to table cells and offers these value options:
baseline
bottom
middle
top
By contrast, the vertical-align CSS property applies to most inline, inline-block, and table-cell elements, and offers several additional options:
sub
super
text-top
text-bottom
arbitrary length and percentage values
Otherwise I'd expect them to be essentially interchangeable.
.vertical-align-top {
vertical-align: top;
}
.vertical-align-middle {
vertical-align: middle;
}
.vertical-align-baseline {
vertical-align: baseline;
}
td {
height: 50px;
padding: 0 10px;
background: pink;
}
<table>
<tr>
<td valign="top">valign</td>
<td class="vertical-align-top">vertical-align top</td>
</tr>
<tr>
<td valign="middle">valign middle</td>
<td class="vertical-align-middle">vertical-align middle</td>
</tr>
<tr>
<td valign="baseline">valign baseline</td>
<td class="vertical-align-baseline">vertical-align baseline</td>
</tr>
</table>
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've got a table with CSS styling that has a blank (e.g. white background) first column, and a second column with alternating rows. The problem, however, is that I need to insert another table into the table that doesn't apply the same logic and just acts like a normal table.
Every time I try, it gets over-ridden by the styling and the table within the table also appears white
Any ideas?
HTML:
<table class="ContentTable1" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center; width: 106.5px;">
<p><img src="/knowledgeobject/read?id=149&context=image" data-koid="149" />
</p>
</td>
<td style="width: 1041px;">
<table width="100%">
<tbody>
<tr>
<td style="width: 1%; text-align: center;" width="884">1.</td>
<td width="884">Turn alarm off - If already turned off, check to see if anyone else is in the building</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS
.ContentTable1 td:first-child {
text-align: left;
background-color: #FFFFFF;
}
To target just the first column of the parent table, use the CSS child selector (>):
.ContentTable1 > tbody > tr > td:first-child {
text-align: left;
background-color: #FFFFFF;
}
Want to show table contents(text / hyperlink/ div contents) horizontal in safari browser but dont know how to fix it as in google chrome table contents are absolutely showing fine as horizontal
enter code here
<div class="itemFields">
<table>
<tbody><tr>
<td class="label" dir="ltr">Call Number</td>
<td><div>PS169.F7 H3 1961</div></td>
</tr><tr>
<td class="label" dir="ltr">Publisher</td>
<td><div><span dir="ltr">F. Ungar Pub. Co.</span></div></td>
</tr><tr>
<td class="label" dir="ltr">Year</td>
<td><div><span dir="ltr">1961</span></div></td>
</tr>
</tbody></table>
</div>
div.itemFields {
margin: 0;
margin-right: 15em;
}
.itemFields table tr td {
vertical-align: top;
}
.itemFields table tr td {
padding: 0;
}
.itemFields table tr td.label {
padding-right: 1em;
font-weight: bold;
white-space: nowrap;
}
.itemFields table tr td div {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
word-wrap: break-word;
}
.itemFields table tr td div a,
.itemFields table tr td div span {
display: inline;
}
this itemFields class content is showing contents of it vertical in safari browser
Try This Code ! You have to need reset code also better if you use bootstrap............. This code just simple HTML5 Table format & Style. You can change table width 960px & more..........
<div class="itemFields">
<table width="960px" align="center" border="1">
<tbody>
<tr>
<td class="label" dir="ltr">Call Number</td>
<td>
<div>PS169.F7 H3 1961</div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Publisher</td>
<td>
<div><span dir="ltr">F. Ungar Pub. Co.</span></div>
</td>
</tr>
<tr>
<td class="label" dir="ltr">Year</td>
<td>
<div><span dir="ltr">1961</span></div>
</td>
</tr>
</tbody>
</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