Auto expand TD according to contained DIV - css

I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).
Here is the code from fiddle
UPDATED
HTML
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td class="expand">
<div class="vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td class="expand">
<div class="hw vertical">
<input placeholder="some text">
<button>X</button>
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
<input placeholder="some text">
<button>X</button>
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>
CSS
table td {
border: 2px solid lightgray;
}
.hw {
width: 208px !important;
height: 20px;
}
.expand {
white-space: pre;
}
.vertical {
/* writing-mode: vertical-rl; */
transform: rotate(90deg);
}
Thanks in advance.

Use white-space: pre; in td.
edits
check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.
Check Can I Use for broswer support
table td {
border: 2px solid lightgray;
white-space:nowrap
}
.vertical {
writing-mode: tb-rl;
}
<table>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
<tr>
<td>
<div class="vertical" >
vertical text
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div class="vertical">
vertical text
</div>
</td>
</tr>
<tr>
<td>
<div>
?
</div>
</td>
<td>
<div>
lorem ipsum
</div>
</td>
<td>
<div>
?
</div>
</td>
</tr>
</table>

You can achieve this with jQuery:
var height = $('.vertical').width();
$('.vertical').css({'height':height+'px'});
It takes the width of what the TD would have been if horizontal and applies it to the height instead.
Jsfiddle here

Related

unable to change table border radius css

I'm trying to change my top left and right border radius on my css but its not doing anything, I have tried targeting the IDs and the table itself and the but nothing is working I'm hoping someone can point out what I'm doing wrong, I'm just not seeing it change at all in my actual html template
heres my code for an example
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
table{
border-top-left-radius: 10px;
}
#flightsHeader{
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
You need to add the following CSS to the first TD in the header.
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
So it becomes
#flightsHeader{
height: 3em;
background-color: #2E9CFE;
color: white;
}
#firstTableHeader {
border: 1px solid #2E9CFE;
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png"/>
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>
You are missing the border width, style and color. I added an example below.
table { /* this is if you want border radius for the table */
/*border: 1px solid;*/
border-top-left-radius: 10px;
}
#flightsHeader {
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
#flightsHeader td:first-child{/* this is if you want border radius for the first <td> in the header */
border-top-left-radius: 10px;
}
<table id="flightsContainer">
<tr id="flightsHeader">
<td id="firstTableHeader"><b>FLIGHT INFO</b></td>
<td><b>DEPART</b></td>
<td><b>RETURN</b></td>
<td><b>TRAVELER</b></td>
<td><b>STATUS</b></td>
<td><b>TOTAL</b></td>
</tr>
<tr v-for="flight in pageOfItems" :key="flight.id">
<td>
<section id="flightsAgency">
<div>
<img src="../assets/agency1.png" />
</div>
<div>
<small>Booking No:</small>
<b><p>{{flight.booknum}}</p></b>
</div>
</section>
</td>
<td>
<section>
<small>{{flight.departDate}}</small>
<b><p>{{flight.departLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.returnDate}}</small>
<b><p>{{flight.returnLocation}}</p></b>
</section>
</td>
<td>
<section>
<small>{{flight.travelerType}}</small>
<b><p>{{flight.travelerAge}}</p></b>
</section>
</td>
<td>
<section>
<b><p class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
</section>
</td>
<td>
<section>
<small>USD</small>
<b><p>{{flight.total}}</p></b>
</section>
</td>
</tr>
</table>

#media print How to show only child elment within table

I want to set up a Print page. I use #media print. Now I have the situation that I only want to extract the text out of a table. The simplified table looks like the following:
<table style="width:100%">
<tr>
<td>
<div>
<p>
Firstname
</p>
</div>
</td>
<td>
<div>
<p>
Firstname
</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>
Werner
</p>
</div>
</td>
<td>
<div>
<p>
Horst
</p>
</div>
</td>
<td>
<div>
<p>
50
</p>
</div>
</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
In the print page I only want to output the <p></p> elements of the whole table but not the rest.
How can I make parent elements invisible while keeping a child element visible?
Hope you can help me thanks in advance.
You could apply display: inline; to all used tags except p:
table, tr, td, div {
display: inline;
}
<table style="width:100%">
<tr>
<td>
<div>
<p>
Firstname
</p>
</div>
</td>
<td>
<div>
<p>
Firstname
</p>
</div>
</td>
</tr>
<tr>
<td>
<div>
<p>
Werner
</p>
</div>
</td>
<td>
<div>
<p>
Horst
</p>
</div>
</td>
<td>
<div>
<p>
50
</p>
</div>
</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
You might also turn the logic around using :not():
*:not(p, html, body) {
display: inline;
}
(I didn't apply that to your example, since apparently it causes some unexpected resuts here in the snippt)

Inner divs to expand the outer div with scroll horizontally

How to make the child divs to display all in one line inside outer div and not fall to second line?
The outer div width should be fixed so the scrollbar should be visible so we can scroll to see all inner divs.
http://jsfiddle.net/pkbkY/
<style type="text/css">
.child
{
width: 100px;
float: left;
}
</style>
<div style="width: 500px; overflow: scroll;">
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
<div class="child">
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</div>
</div>
Here you go: http://jsfiddle.net/thirtydot/pkbkY/1/
#scroll_container {
width: 500px;
overflow: scroll;
white-space: nowrap;
}
.child {
width: 100px;
display: inline-block;
border: 1px solid red;
}
If you need the gaps to be gone, the easiest solution is to remove the whitespace between the child elements: http://jsfiddle.net/thirtydot/pkbkY/2/

How do I emulate a table with divs & css?

A table like this one:
<table>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
...
</table>
How can I create one using div and css display:table rules ?
Try this ;)
CSS
.table {
display: table;
width: 500px;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
HTML
<div class="table">
<div class="tr">
<div class="td">asdf</div>
<div class="td">asdf</div>
<div class="td">asdf</div>
</div>
<div class="tr">
<div class="td">asdf</div>
<div class="td">asdf</div>
<div class="td">asdf</div>
</div>
</div>

How can I get rounded corners to fit over other content?

I have been working on a dynamic page http://www.euroworker.no/order and I want my lovely rounded corners box (border-radius, not images) to fit over the generated products and ordrekommentar boxes. This is dynamic so I have set the HTML, and parent element of this div to height:100%;, but it just extends to the bottom of the page.
How can I get the rounded corners box to fit over the generated content?
Pris
Antall
<tr class="even first">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Plantronics-CS361N.11">
<img src="upload/productimage/11-22-1.jpg?1249726571" alt="Plantronics CS361N" />
</a>
</td>
<td class="cartName">
<div>
Plantronics CS361N
<small>(‏Trådløse - duo)</small>
</div>
</td>
<td class="cartPrice discount">
11950.-
<div class="subTotalCalc">
5 x <span class="basePrice">2988.-</span><span class="actualPrice">2390.-</span>
</div>
</td>
<td class="cartQuant">
<input name="item_984" class="text" type="text" value="5"/>
</td>
</tr>
<tr class="odd">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Target-7050CC-Duo-UNC.7">
<img src="upload/productimage/7-250-1.jpg?1251022192" alt="Target 7050CC Duo UNC" />
</a>
</td>
<td class="cartName">
<div>
Target 7050CC Duo UNC
<small>(‏Med ledning - duo)</small>
</div>
<div class="productOptions">
<div class="nonEditableOption">
Skal tilkobles:
Cisco
</div>
<div class="productOptionsMenu">
Endre valg
</div>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1124.-</span><span class="actualPrice">899.-</span>
</td>
<td class="cartQuant">
<input name="item_997" class="text" type="text" value="1"/>
</td>
</tr>
<tr class="even last">
<td class="cartControl">
Slett
</td>
<td class="cartImage">
<a href="/Sennheiser-MM-400.626">
<img src="upload/productimage/626-984-1.jpg?1264593017" alt="Sennheiser MM 400" />
</a>
</td>
<td class="cartName">
<div>
Sennheiser MM 400
<small>(‏Bluetooth headset)</small>
</div>
</td>
<td class="cartPrice discount">
<span class="basePrice">1938.-</span><span class="actualPrice">1550.-</span>
</td>
<td class="cartQuant">
<input name="item_998" class="text" type="text" value="1"/>
</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">
Tilnærmet fraktpris:
</td>
<td class="amount shippingAmount">124.-</td>
<div id="roundbigbox">
<td id="cartUpdate"><!--<input type="submit" class="submit" value="Oppdater" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">mva:</td>
<td class="amount taxAmount">3600.-</td>
</tr>
<tr>
<td colspan="3" class="subTotalCaption">Totalt:</td>
<td class="subTotal">18123.-</td>
<div id="eavContainer_556782" class="eavContainer">
<p class="required ">
<label for="product___specField_6"><span>Ordrekommentar:</span></label>
<fieldset class="error">
<div class="textarea" style="margin-left: 0;">
<textarea id="product__708_specField_6" name="specField_6" class="tinyMCE"></textarea>
<div class="errorText hidden"></div>
</div>
<div class="errorText hidden"></div>
</fieldset>
</p>
</div>
CSS
roundbigbox {
padding:10px;
width:760px;
height:1%;
border-width:1px;
border-radius:10px;
border-color:#dddddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:-1;
position:relative;
overflow:hidden;
}
<div id="products">
<div class="product">...</div>
<div class="product">...</div>
</div>
#products
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position: relative;
height: 1%;
overflow: hidden;
padding: 10px;
}
You won't get the border-radius to work in IE but the box will extend dynamically to accommodate x amount of products in IE6+, FF, S, C & O

Resources