Lets say we have this table:
<table>
<tr>
<td width="50px">Text crossing two td´s</td>
<td width="50px"></td>
</tr>
</table>
How can the text be on top of the two td´s and follow the size of the tr?
https://jsfiddle.net/roj7w1t4/
Is it possible?
EDIT
I need the borders to stay visible. Therefore i cannot use colspan!
Is it possible to create a span and put it over the td´s?
To make more sense what i am trying to do.. this is a small example of my application: What printable element is better to use than linear-gradient?
THE ELEMENT
<div class="elementsDiv ui-draggable ui-draggable-handle" id="29065-1_105" data-weight="938" data-nr="105" style="width: 159.5px; height: 20px; position: absolute; left: 108px; top: 27.1875px;"><table style="height: 100%;"><tbody><tr style="border 1px solid black;"><td style="width: 34.2px; border-right: 1px dotted black;">105</td><td style="width: 91px; border-right: 1px dotted black;"></td><td></td></tr></tbody></table></div>
The only way I can image doing this is placing an element outside the table and having a container around the table and the element. Then placing the element using position absolute on top of the table.
div {
width: 200px;
position: relative;
}
table {
width: 200px;
}
td {
border: 1px solid red;
height: 40px;
}
span {
position: absolute;
padding: 2px;
z-index: 99;
}
<div>
<span>Lorem ipsum dolor sit amet</span>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
How about changing your html layout? Try to use after pseudo element and position:absolute. This technique saves me in a lot of situation and it's very strong, I think.
div {
border: 1px solid green;
padding: 2px;
position: relative;
width: 150px;
}
div:after {
background: green;
bottom: 0;
content: '';
display: block;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1px;
}
<div>
This text should cross two td´s
</div>
table {
border: 1px solid black;
}
td {
border: 1px solid red;
}
th {
text-align:center;
}
<table>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td width="50px">This text should cross two td´s</td>
<td width="50px"></td>
</tr>
</table>
You can include the border will be visible.
All the best. For any query please comment.
Related
Is there any way to make Angular Material with a sticky first column using CSS?.
Here is ready to edit Stackblitz code
I have tried to adapt this solution https://jsfiddle.net/zinoui/BmLpV/ but for some reasons, the first column is thrown out of the table itself and it loses styling.
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>..........
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
.......
<tr>
</tbody>
</table>
</div>
</div>
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
With the angular material version 6 this has been made easy.
You can add sticky tag on columns that need to be sticky on the left of the table and stickyEnd tag for the ones on the right of the table.
here is a Stackblitz example
td:first-child, th:first-child {
position:sticky;
left:0;
z-index:1;
background-color:grey;
}
I have used stickyEnd to achieve this like below.
<ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
<ng-container
matColumnDef="name"
sticky
>
</ng-container>
`
.mat-table-sticky:first-child {
border-right: 1px solid #e0e0e0;
}
`
It worked for me using;
` :host ::ng-deep .mat-cell:first-child, .mat-header-cell:first-child {
position: sticky;
position: -webkit-sticky;
right:0;
z-index:1;
background:inherit;
border-left: 1px solid grey;
} `
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
I am encountering an issue in IE9,10,11 where an ::after pseudo element will not fill 100% of the height of it's td parent.
If the first column in the second row had two lines of text, the pseudo element would fill the full height with no problem. So, I figured that the issue was happening because the td was not filling the height of the tr but that isn't the case.
The first screenshot is Chrome and the second is IE9
HTML
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
CSS
table td {
border-bottom: 1px solid;
}
table td:first-child {
position: relative;
}
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 100%;
display: block;
background-color: orange;
}
Codepen: http://codepen.io/cbier/full/BjpaqB/
P.S. I am using an ::after pseudo-element instead of borders for a special reason and it is a requirement
Thanks!
May be using a single pseudo element for the whole table ?
table {
overflow: hidden;
}
table td {
border-bottom: 1px solid;
}
table tr:first-child td:first-child {
position: relative;
}
table tr:first-child td:first-child:after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 1000px;
display: block;
background-color: orange;
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
An alternate way, with background : linear-gradient
table td {
border-bottom: 1px solid;
}
table td:first-child {
background-image: linear-gradient(270deg, orange 3px, transparent 3px);
}
<table>
<tr>
<td>Two<br/>Lines</td>
<td>Two<br/>Lines</td>
</tr>
<tr>
<td>One Line</td>
<td>Two <br/>Lines</td>
</tr>
</table>
You can use following code for it:
table td:first-child::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 2px;
height: 45px;
display: block;
background-color: orange;
}
it is giving same output in chromeas well as IE 9
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;
}
Problem
I have a fixed width table (which it must be) and one of the cells contains text
that is too long to fit within it, so it overflows outside the cell to the right.
I need to have all the table cells' text to be aligned to the right.
I ideally don't want to change any of the markup.
What I'm Looking For
I'm in need of finding someway for the (text in the example) "longlonglong" to overflow to the left over the other previous cells and maintain it's aligned right state.
Code
HTML
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">very longlonglong text</td>
</tr>
</table>
CSS
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Example
http://jsfiddle.net/xareyo/eVkgz/
See http://jsfiddle.net/eVkgz/1/
<table width="120">
<tr>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">text</td>
<td width="30">
<div id="container1">
<div id="container2">very longlonglong text</div>
</div>
</td>
</tr>
</table>
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
}
#container1 {
width: 30px;
position: relative;
}
#container2 {
float: right;
overflow: visible;
text-align: right;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Do you need a variable height of the cells?
If not:
Place a div inside the td and this CSS:
td {
text-align: right;
border: 1px solid black;
vertical-align: top;
position: relative;
}
td div {
position: absolute;
right: 0;
}
table {
border: 1px solid red;
table-layout: fixed;
}
Add word-break: break-all; to yours td style:
td {
word-break: break-all;
text-align: right;
border: 1px solid black;
vertical-align: top;
}