I have a HTML Table with 2 columns and about 80 rows, which contains Acronyms, and their meanings.
Is there a (CSS?) way to display just the first row of the table, and have the meaning (i.e. it's accompanying td in the same tr) come up in some sort of box on mouseover?
This question has been asked before, but yes. You can.
JSfiddle
CSS:
.meaning {
display:none;
}
.Acronym:hover + .meaning {
display:unset;
}
HTML:
<table>
<tbody>
<tr><td class="Acronym">Foo</td><td class="meaning">bar</td></tr>
<tr><td class="Acronym">Foo2</td><td class="meaning">bar2</td></tr>
</tbody>
</table>
This is possible with only css using the :hover selector.
Here is an example of a cell with a tooltip, each .cell can be a <td> in a table.
Codepen
html
<span class="cell">
acr.
<div class="tooltip">Acronym</div>
</span>
css
.cell {
border: 1px solid black;
padding: 5px 10px;
}
.cell .tooltip {
position: absolute;
opacity: 0;
transition: opacity 250ms;
border: 1px solid grey;
background-color: white;
padding: 2px;
}
.cell:hover .tooltip {
display: block;
opacity: 1;
}
Related
I set a fixed width in td, but it doesn't work when the table is overflow. What I have tried is the below code.
td {
width: 192px;
}
It can resolve by following 2 steps.
1 - On table set width:100%
2 - On td of table use class like this when your data get overflow.
.dataRow
{
word-wrap: break-word;
word-break: break-all;
}
3 - after above 2, you can also set width as per your requirement, if needed.
You can change in css with td { width:20px} or you can change it inline <td style="width:20px">.
This can be achieve using display property.
Check below Snippet.
.wrapper {
width: 180px;
border: 1px solid #000;
}
.table-scroll {
width: 100%;
table-layout: fixed;
}
.table-scroll tbody {
display: block;
overflow: scroll;
}
.table-data {
border: 1px solid #0F0;
}
.table-detail {
border: 1px solid #F00;
}
td.first {
width: 200px;
display: inline-block;
}
<div class="wrapper">
<table class="table-scroll table-data">
<tbody>
<tr>
<td class="first">HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
</tbody>
</table>
</div>
I'm creating PDFs in ColdFusion using cfdocument. I need to make a table with the header row slanted so it all fits on the page. Here's an example of what I'm trying to accomplish. None of the HTML or CSS examples I have found so far have worked. Now I'm wondering if this is a quirk specific to ColdFusion and/or PDFs creation. I know this code came directly from an answer to a similar question here, but it does not create a table with slanted columns in my PDF.
It creates this.
//CSS
* {
box-sixing: border-box;
}
.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
border-bottom: 0;
border-left: 0;
transform: skew(-30deg) translateX(58%);
}
th:first-child .outerDiv {
border-left: 1px solid black;
position: relative;
}
.innerDiv {
position: absolute;
width: 250px;
height: 85px;
bottom: -34%;
left: 10px;
transform: skew(30deg) rotate(-60deg);
transform-origin: 0 0;
text-align: left;
}
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
.well {
min-height: 20px;
padding: 5px;
margin-bottom: 10px;
background-color: #f5f5f5;
border: 1px solid black;
border-radius: 3px;
}
.well_tight {
padding: 3px;
margin-bottom: 5px;
background-color: #f5f5f5;
border: 1px solid black;
border-radius: 3px;
}
//ColdFusion/HTML
<cfdocument format="pdf" name="#formname#" pagetype="letter" marginleft=".25" marginright=".25" margintop=".25" marginbottom=".5">
<cfoutput><style type="text/css">#import "/mach15/web/assets/css/formPDF.css";</style></cfoutput>
<div class="well">
<table cellpadding="0" cellspacing="0">
<tr>
<th>
<div class="outerDiv">
<div class="innerDiv">This is first column header</div>
</div>
</th>
<th>
<div class="outerDiv">
<div class="innerDiv">This is second column header</div>
</div>
</th>
<th>
<div class="outerDiv">
<div class="innerDiv">This is third column header</div>
</div>
</th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
<tr>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
</div>
I work on styling PDF documents using cfdoucment quite a bit and have had a lot of trouble with CSS. so many features aren't supported that would make styling the PDFs so much easier: CSS3 properties, CSS Pseudo elements and not even the !important tag can be used unfortunately.
There are however enough tricks and work arounds that you can use to (somewhat) achieve your desired results, they usually require customizing your markup a bit, Here's how I would go about solving your problem:
First: Getting a table with bordered cells/rows is not a fun task with CSS for CF PDF. One of the CSS Properties that's not supported is border-collapse: collapse; so if you use tables there will be spaces between cells, etc.. you'll end up with something like this for a standard table:
So I would probably generate a separate markup using <div> just for your PDF content and add a pdf-only class or something to it to display only on PDFs and hide elsewhere.
In your questions there are 2 problems that cannot be fixed due to CSS's limitation. 1) slanted lines 2) vertical slanted text.
1) Slanted lines:
I was able to create the slanted blocks by attaching a background image (see below) to the header cells and shifting them along with some other css code that's hopefully easy to follow:
.th {
padding:10px 0;
height: 200px;
position: relative;
left:50px;
border-top: 1px solid #000;
background:url(../img/line.gif) no-repeat right center;
}
Here's the full markup with the CSS:
<div class="table-wrapper pdf-only">
<div class="row th-row">
<div class="th th1"> </div>
<div class="th th2"> </div>
<div class="th th3"> </div>
<div class="th th4"> </div>
</div>
<div class="row td-row first-td-row">
<div class="td td1">Row 1</div>
<div class="td td2"><span class="td-border"></span>r1c1</div>
<div class="td td3"><span class="td-border"></span>r1c2</div>
<div class="td td4"><span class="td-border"></span>r1c3<span class="td-last-border"></span></div>
</div>
<div class="row td-row">
<div class="td td1">Row 2</div>
<div class="td td2">r2c1</div>
<div class="td td3">r2c2</div>
<div class="td td4">r2c3</div>
</div>
</div>
CSS:
.table-wrapper {
width:75%; // so that the last column won't get cut off
position: relative;
}
.row {
width: 100%;
}
.td-row {
border-bottom:1px solid #000;
width: 100%;
position: relative;
}
.td {
padding:15px 0;
text-indent: 10px;
position: relative;
}
.th {
padding:10px 0;
height: 200px;
position: relative;
left:50px; // this should the same as the width of line.gif
border-top: 1px solid #000;
background:url(../img/line.gif) no-repeat right center;
}
/* Adjust the td, th widths below . You can even add different % to
different cols as long as the total adds up to 100% per row. */
.td, .th {
width: 25%;
float: left;
}
.th1 {
border-top: 0;
}
span.td-border {
height:1000px;
width: 1px;
position: absolute;
border-left: 1px solid #000;
left: 0;
top:0;
}
span.td-last-border {
height:1000px;
width: 1px;
position: absolute;
border-left: 1px solid #000;
right: -10px;
top:0;
}
.first-td-row {
border-bottom: 1px solid #000
}
Here's what you'll get: (this is an actual generated PDF using <cfdocument>)
so that takes care of the slanted headers
2) Vertical Text
I can think of 2 solutions, none of which are ideal, but then again we're styling CF PDFs so we'll have to get creative.
To get exactly what you have posted in your question (rotated text) I believe the only way to achieve this is using images instead of texts. Yeah I know it's cheating specially if your tables are going to be dynamic with the header texts constantly changing this won't work. But if this list won't change too much you might as well use images, example:
You would then add another element inside your header cell and set that image as its background and center position it:
<div class="th th1">
<div class="text"></div>
</div>
.th .text {
width:100%;
height:100%;
position:absolute;
}
.th1 .text {
background-image:url(../img/col1-text.gif) no-repeat center center;
}
If using images as texts won't work, you can perhaps loop through the text and and a line break after each letter followed by a space and increment it each time in a descending fashion:
1<br/>
l<br/>
o<br/>
C<br/>
That obviously doesn't rotate the text, but it will make it easier to fit the content in the header.
Hope that helps.
Are you using CF11 or above? If so, please use <cfhtmltopdf> with much better css support instead of the legacy <cfdocument>.
https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-g-h/cfhtmltopdf.html
Is it possible to define where overflow: hidden begins based on padding?
For example, I currently have a table in which I have a long string. There is padding on the left, but the length of the string exceeds the td, so overtflow hidden is triggered. I would like the overflow: hidden to trigger at the beginning of the padding rather than the end of the td.
Essentially I would like the overflow: hidden to begin at the start of the far right red line.
.order-table td {
padding: 1em 3px;
border-left: #ddd 1px solid;
font-size: 0.9em;
overflow: hidden;
}
Simply wrap your content in another element and apply the overflow: hidden to that instead:
table {
width: 100px;
table-layout:fixed;
}
td {
border: 1px solid red;
padding: 10px;
}
.inner {
border: 1px solid blue;
overflow: hidden;
text-overflow: ellipsis;
}
<table>
<tr>
<td><div class="inner">123456789012345678901234567890</div></td>
</tr>
</table>
Add text-overflow:ellipsis to add an ellipse at the end. Hopefully this fix's your issue.
/*** USELESS STYLES ***/
html,
body {
background: #FFF;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
line-height: 1.4em;
}
.element:before {
content: '> ';
}
/*** .USELESS STYLES ***/
.element {
background: #F1F1F1;
color: #555;
padding: 10px 15px;
overflow: hidden;
border: 1px solid #ccc;
margin: 10px;
text-overflow: ellipsis;
white-space: nowrap;
width: 50%;
}
<div class="element" title="This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.">Hover Over Me. This is some text that will need to cut because it will be far to long for users to see but the user should know what it means, and they can even click to find out more about this if your site supports this.</div>
The solution like the following example should work:
div {
border:1px solid #000;
padding:20px;
width:50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div>testtesttesttesttesttest</div>
See on fiddle: https://jsfiddle.net/bm3upfoc/
table {
width: 300px;
table-layout: fixed;
}
td {
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
td span {
float: right;
}
.inner {
border: 1px solid blue;
overflow: hidden;
}
<table>
<tr>
<td>
<span>
something
</span>
</td>
<td>
<span>
1234567890ABCDEFG
</span>
</td>
<td>
<span>
something
</span>
</td>
</tr>
</table>
Wrap the table content to span
<span>
a Very Long line of text and hope this helps
</span>
then add the CSS TD SPAN, float it to right
TD SPAN{
float:right
}
I find that if I put an image inside a table cell like this (JSFiddle):
<table style="height: 300px; border: 1px solid black">
<tr>
<td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td>
</tr>
</table>
There will be a small space below the image, making the vertical align not exact:
Does any one know what is happening here?
I tried to add vertical-align: middle to the td, but it makes no difference.
Have you tried adding display: block to the img element? Seems to fix most problems for things within tables.
img {
display: block;
}
<table style="height: 300px; border: 1px solid black">
<tr>
<td>
<img src="https://www.google.com.hk/images/srpr/logo11w.png" />
</td>
</tr>
</table>
JSFiddle
You have to set the img as "display:block"
img {display:block}
http://jsfiddle.net/91beLce7/4/
Try this Fiddle
*{
margin: 0;
padding: 0;
}
table tr td img{
display: block;
}
You can fix that with line-height: .8em;
Try like this: Demo
* {
margin: 0;
padding: 0;
}
table {
background:red;
height: 300px;
border: 1px solid black;
}
tr {
background:#ccc;
}
img {
background:green;
display: block;
}
I have some divs like this:
The second div has the class highlit
The third div has the class framed
The fourth div has both highlit and framed.
Why is the border disappearing in the fourth case?
http://jsfiddle.net/ycyrwgcz/3/
html
<table>
<tr>
<td>
<div class="thumb"><div class="overlay"></div></div>
</td>
<td>
+
</td>
<td>
<div class="highlit thumb"><div class="overlay"></div></div>
</td>
<td>
+
</td>
<td>
<div class="framed thumb"><div class="overlay"></div></div>
</td>
<td>
=
</td>
<td>
<div class="highlit framed thumb"><div class="overlay"></div></div>
</td>
</tr>
</table>
with the css
body
{
background-color: #ff8888;
}
.thumb
{
width: 40px;
height: 40px;
display: inline-block;
margin: 10px;
background-color: #8888ff;
}
.overlay
{
height: 100%;
}
.thumb.framed .overlay
{
border: 2px solid #fff;
box-sizing: border-box;
}
.thumb.highlit .overlay
{
background-color: #fff;
opacity: 0.4;
}
These are the css rules you have:
.thumb.highlit .overlay {
background-color: #FFF;
opacity: 0.4;
}
.thumb.framed .overlay {
box-sizing: border-box;
border: 2px solid #FFF;
}
Now, for the 4th <div> both the above styles get mixed up. Means, there is a background-color: #fff along with border: 2px solid #fff.
As you can see, both these are white color. And because of this you're not able to distinguish the border.
Try to change the color of any one of the above rules and you'll get the solution.
Hope this helps. :)
You want this, should be self explaining ;)
.thumb.highlit .overlay {
background-color: rgba(255,255,255,0.4);
}
http://jsfiddle.net/fxxf6kcs/1/
It isn't disappearing - just blending in with the rest of the overlay and as you have set it to be opaque it will turn purple. If you are only wanting the background to be opaque and not the whole overlay you will need to use rgba background colours:
.thumb.highlit .overlay
{
background-color: rgba(255,255,255,0.4);
}
Example
This should work back to ie 8
Try this:
body
{
background-color: #ff8888;
}
.thumb
{
width: 40px;
height: 40px;
display: inline-block;
margin: 10px;
background-color: #8888ff;
}
.overlay
{
height: 100%;
}
.thumb.framed
{
border: 2px solid #fff;
box-sizing: border-box;
}
.thumb.framed .overlay
{
box-sizing: border-box;
}
.thumb.highlit .overlay
{
background-color: #fff;
opacity: 0.4;
}
Because the background-color and border-color is same (#fff) in the fourth div.
You are using .overlay class which has the following:
.thumb.highlit .overlay {
background-color: #fff;
opacity: 0.4;
}
.thumb.framed .overlay {
border: 2px solid #fff;
box-sizing: border-box;
}