100% height pseudo element on a table cell in IE - css

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

Related

Table cell conundrum: trying to vertically center a link inside a table cell whose entire cell area is link-clickable

As you can see, in order to make the entire table cell link-clickable, I used td a {display: block}. The problem is td a {vertical-align: middle} no longer works with display: block. Not sure how else to center it vertically. Any help would be greatly appreciated.
P.S. I avoided using line-height because my link needs to be multi-line.
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: block;
height: 100px;
vertical-align: middle !important;
}
<table>
<tr>
<td>TEXT</td>
<td>LINK</td>
</tr>
</table>
You can use an auxiliar span and center it inside the anchor, so its content is free to move and align.
E.g.:
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: flex;
height: 100%;
}
td a span {
height: fit-content;
align-self: center;
}
<table>
<tr>
<td>TEXT</td>
<td>
<a href="">
<span>
A VERY LONG LINK MAY BE LIKE THIS ONE, I GUES, RIGHT? HERE WE GO :D
</span>
</a>
</td>
</tr>
</table>
Added span in anchor tag and made a CSS change for the output
table {
width: 300px;
border-collapse: collapse;
}
td {
border: 1px solid #000000;
height: 100px;
vertical-align: middle;
}
td a {
display: table;
position: relative;
height: 100%;
width: 100%;
}
span {
display: table-cell;
text-align:center;
vertical-align: middle;
}
<table>
<tr>
<td>TEXT</td>
<td><span>LINK</span></td>
</tr>
</table>

How to ensure that the table will be square on any screen size. No matter how many rows/columns

I am trying to style a table of two rows and sixteen columns to be always square on any screen resolution. So cells are narrow rectangles in portrait layout. I tried the following:
HTML:
<table>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
</table>
CSS:
table {
width:100%;
}
table:after {
content: '';
display: block;
margin-top: 100%;
}
td {
width: 6.25%;
position: relative;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
border: 1px solid brown;
}
I found the solution myself but still did not understand it. So my question changes from “How” to “Why”. I also forgot to mention, that I use Bootstrap 4 on this page. So the whole solution is below – it works, I tested. But if I add another <div> before <div class = “square”>, it won’t work. It only works if <div class = “col-*-*> (Bootstrap's class) is before <div class = “square”>.
HTML:
<div class = "row">
<div class = "col-sm-8">
<div class = "square">
<table>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
<tr>
<td><div class="content"></div></td>
... *another 14 td's*
<td><div class="content"></div></td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.square {
width:100%;
height: 100%
}
.square:after {
content: '';
display: block;
margin-top: 100%;
}
table {
width:100%;
height: 100%;
}
td {
width: 6.25%;
position: relative;
}
td .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: yellow;
border: 1px solid brown;
}
unfortunately, there's no real good way to set the height relative to the elements width yet. One solution you could try is making the width and height static numbers and then use media queries so it doesn't run off the page. something like this:
.table {
width: 100px;
height: 100px;
}
#media (min-width: 768px) {
.table {
height: 300px;
width: 300px;
}
}
#media (min-width: 1200px) {
.table {
width: 500px;
height: 500px;
}
}
To answer that second question:
Bootstrap uses flexbox which unless you specify otherwise will try to fit everything on the same line. If you set flex-wrap: wrap; to that bootstrap class then it should allow things that are 100% to fill that row and bump other stuff up or down.

How to place text on top of two table cells?

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.

CSS3 diagonal rotate text-align

fiddle: https://jsfiddle.net/mj3ez7cL/
How do I make the diagonal labels text-align: right no matter how long the label is the last letter should be tied to the bottom of the 'th'-element, I have tried to add more negative margin-top, but that only solves the overflow issue, also I wouldn't be sure how long a label could be so it needs to be a dynamic solution
th[class='special'] span {
margin-top: -40px; // no good, we don't know how
// long a label could be and this doesnt align the
// text to the right (th bottom)
}
You can try this, using absolute position on the span, and set the text direction to "right-to-left", so it always renders from the bottom/right.
JsFiddle Demo
th[class='special'] {
width: 40px;
position: relative;
}
th[class='special'] span {
position: absolute;
bottom: 0;
direction: rtl;
}
* {
margin: 0;
padding: 0;
text-align: left;
}
table {
margin-top: 50px;
width: 100%;
}
table tr, table th, table td {
border: 1px solid #e1e1e1;
}
th[class='special'] {
width: 40px;
position: relative;
}
th[class='special'] span {
/* margin-top: -10px; */
/* margin-left: -10px; */
position:absolute;
bottom:0;
direction: rtl;
width: 28px;
white-space: nowrap;
display: block;
/*Firefox*/
-moz-transform: rotate(45deg);
/*Safari*/
-webkit-transform: rotate(45deg);
/*Opera*/
-o-transform: rotate(45deg);
/*IE*/
writing-mode: tb-rl;
filter: flipv fliph;
}
<table>
<thead>
<tr>
<th>Hello</th>
<th class="special"><span>Foo</span></th>
<th class="special"><span>Foobar</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>World</td>
<td>Yes</td>
<td>No</td>
</tr>
</tbody>
</table>

CSS Table to read left to right

I do not have control over the markup on this table, only the CSS.
I'm looking to make the table read from left to right instead of the vertical.
http://jsbin.com/oXOYayA/1/edit
Any thoughts would be greatly appreciated. Thanks.
This works.
FIDDLE
body {
-webkit-transform: rotate(90deg);
}
table {
width: 100%;
border: none;
padding: 0;
margin-top: 100px;
-webkit-transform: scaleY(-1);
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
-webkit-transform: scaleY(-1);
}
table tr:first-child td {
background: #e9e9e9;
}
table tr td {
padding: 10px 5px 10px 5px;
text-align: center;
border: 1px solid #43447b;
-webkit-transform: rotate(-90deg);
height:60px;
}
Just make sure you replace body with whatever container holds the table to be flipped.
I'm not sure what you're asking. But you want the <th> on the bottom and <td> at the top?
You can mirror the table on the Y-axis and reset the mirror on the td so the text isn't mirrored:
table {
width: 100%;
border: none;
padding: 0;
margin-top: 28px;
-moz-transform: scaleY(-1); /* Gecko */
-o-transform: scaleY(-1); /* Operah */
-webkit-transform: scaleY(-1); /* webkit */
transform: scaleY(-1); /* standard */
}
table tr td {
padding: 10px 5px 10px 5px;
text-align: center;
border: 1px solid #43447b;
-moz-transform: scaleY(-1); /* Gecko */
-o-transform: scaleY(-1); /* Operah */
-webkit-transform: scaleY(-1); /* webkit */
transform: scaleY(-1); /* standard */
}
jsBin
Does it have to work in older browsers? For newer browsers I'd recommend rotating the table 90deg counter-clockwise using CSS3 transforms and then rotate the cells back the other way.
http://jsbin.com/oXOYayA/5/edit
Works best if all cells are square (that's why i set explict width/height on the TDs
EDIT: Actually, if you combine my answer with nkmols it can be done: http://jsbin.com/oXOYayA/7/edit
The trick is to combine the transforms
transform: rotate(-90deg) scaleX(-1);
It rotates part of the table out of view but you can fix that easily enough by setting a pivot point for the transform.
I know you said you can't change the markup but I have used < thead > < tbody > tags. In your case, just use class names to replace the thead and tbody tags.
Fiddle: http://jsfiddle.net/jennift/aCs7c/
For the table:
<table border="0">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>188</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>211</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
And the css:
table {
border-collapse: collapse;
border-spacing: 0;
position: relative;
}
thead {
display: block;
float: left;
}
tbody {
display: block;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
thead tr {
display: block;
}
th {
display: block;
text-align: right;
border:1px solid #000;
}
tbody tr {
display:inline-block;
vertical-align: top;
float:left;
}
td {
display: block;
text-align: left;
border:1px solid #000;
}
/*fix your borders*/
you can also refer to http://elvery.net/demo/responsive-tables/

Resources