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)
Related
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
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
I have following html which is used to render a PDF file, I need to render the <tfoot> section always at the bottom of every page even if the content of the page are small.
<div class="pdf-position-top pdf-content-center">
<table>
<thead>
<tr>
<th>
<div class="print-banner">
<span class="banner-text-repeat">Some Text</span>
</div>
</th>
</tr>
</thead>
#RenderSection("TableBody", required: true)
<tr>
<td>
<div class="pdf-content-center">#RenderBody()</div>
</td>
</tr>
<tfoot>
<tr>
<td>
<!--START print-banner top-->
<div class="print-banner">
<span class="banner-text-repeat">Some Text</span>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
From documentation of header/footer
EO.Pdf.HtmlToPdf.Options.HeaderHtmlFormat = '<div class="print-banner">
<span class="banner-text-repeat">Some Text</span>
</div>'
I have the code below where I'm trying to size a text input element using bootstrap's classes. However, I cannot get the thing to size down. I want it to be smaller on desktop, instead of taking up a massive amount of room.
<div class="container White_BG">
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Quickly place your order with this form.</h1>
<h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>
<div class="table-responsive">
<form method="post" name="QuickOrderMulti">
<table class="table table-bordered table-condensed table-hover">
<tr>
<th>Item #</th>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
<th>Subtotal</th>
</tr>
<tr>
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
<td>
<input type="text">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
The offending line is:
<td>
<div class="col-lg-2">
<input type="text">
</div>
</td>
I tried using the col-lg-2 to make it only take up 2 grid columns, so maybe it'd be smaller. But no such luck.
Rather than surrounding it in a div, try making the input with the chosen class.
e.g.
<input class="col-lg-2" type="text">
JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/
Full Screen JSFiddle: http://jsfiddle.net/ardave/8DR6n/3/embedded/result/
I've got these three divs at the bottom right of the page, each containing an html table with text, and it all displays fine at most desktop resolutions.
However, when I shrink my window horizontally, or when I view it on certain mobile devices, the tables' contents overlap each other.
This problem appears just as the window is sized below 979 pixels wide, which coincides with the bootstrap-responsive.css media query for tablet size, so I'm sure this is related, but I don't know enough to figure out how or why.
The problem also coincides with the width that the navbar across the top disappears, though again, I don't know enough to say how or why.
The only other possibly useful thing I've discovered is that when the window is sized so that the problem exists, when I hover over the span or table elements in the "Elements" debugger window in Chrome, I can clearly see that the tables' columns extend past the size of the tables themselves, and past the sizes of the span4 divs that contain the tables.
I don't really want the content to overflow visibly, which I think is the current problem, however I also don't want to hide or scroll the overflow. I'd really just like the table text to stay at a non-overlapping size until the tables/span4s are forced to respond responsively by stacking on top of each other once the screen gets too narrow.
Any help would be greatly appreciated.
It seems possibly excessive, but I guess SO wants me to include the code itself rather than just the links to jsfiddle, so here goes (assume that bootstrap.css and bootstrap-responsive.css are referenced)
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">View All</li>
<li>View All
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>My Site Name</h1>
<p>Introductory stuff</p>
<p> <a class="btn btn-primary btn-large" href="/Home/About">About »</a>
</p>
</div>
<div class="container">
<div class="row-fluid">
<div class="span4">
<h2>Newest Entries</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>1/28/2013</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>12/4/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/17/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/15/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/29/2012</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/21/2012</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Latest Stuff</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/7/2012</td>
<td>8.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>11/4/2012</td>
<td>10.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>10/11/2012</td>
<td>7.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/13/2012</td>
<td>9.0</td>
</tr>
<tr>
<td> Lots of stuff
</td>
<td> Lots of stuff
</td>
<td>9/6/2012</td>
<td>7.0</td>
</tr>
</table>
</div>
<!--/span-->
<div class="span4">
<h2>Needing Inputs</h2>
<table class="table .table-bordered">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>1/28/2013</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>12/4/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/18/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/9/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/7/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>11/5/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/31/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/30/2012</td>
<td> Lots of stuff
</td>
</tr>
<tr>
<td>Here's a thing</td>
<td> Lots of stuff
</td>
<td>10/18/2012</td>
<td> Lots of stuff
</td>
</tr>
</tbody>
</table>
</div>
<!--/span-->
</div>
</div>
<div>
<p></p>
<p>Here's a big blob of text!</p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Some Company</p>
</footer>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse collapse"> <a class="brand" href="/">TheSiteName.com</a>
<form action="/Search/Search"
class="navbar-search pull-left" method="get">
<input type="text" class="search-query" placeholder="Search by Name" name="SearchQuery"
/>
</form>
<form ReturnUrl="" action="/Account/ExternalLogin" class="navbar-form pull-right"
method="post">
<button type="submit" name="provider" value="facebook" class="logonpartialextlogin"
title="Log in using your Facebook account">
<img src="/Images/facebook.png" />
</button>
<button type="submit" name="provider" value="twitter" class="logonpartialextlogin"
title="Log in using your Twitter account">
<img src="/Images/twitter-bird-white-on-blue.png" />
</button>
<button type="submit" name="provider" value="google" class="logonpartialextlogin"
title="Log in using your Google account">
<img src="/Images/google-icon.png" />
</button>
</form>
<form action="/Account/Register" class="navbar-form pull-right" method="get">
<button type="submit" class="btn">Register</button>
</form>
<form action="/Account/LogOn" class="navbar-form pull-right" method="post">
<input class="span2" type="text" placeholder="Email" name="UserName" />
<input class="span2" type="password" placeholder="Password" name="Password"
/>
<button type="submit" class="btn">Sign in</button>
</form>
</div>
</div>
</div>
</div>
I know this thread is several months old, but I also know that I really appreciate when someone posts an answer that worked for their similar situation. Here's the way I did it in bootstrap 2 and 3.
.cw-table-list{
margin:0px !important;
table-layout:fixed;
}
.cw-table-list td{
padding-bottom: 0px !important;
overflow:hidden;
}
Hope this helps.
Twitch
I can't tell you the "Bootstrap way" to fix this, since I don't use it. I can tell you the why: Your content doesn't allow it at that breakpoint.
Because rows of tables don't wrap around (ie. all of the cells for each row must appear on the same line), there is an absolute minimum width that every given table can resize down to, which depends on things like paddings and the widest non-wrapping content for each cell. For your tables, the smallest they can go is whatever the width of "Column", "Column", and "10/11/2012" equal out to plus 48px (8px padding on each side times 3).
The span4s are only allowed to be 31.49% of 724px (definition on .container ancestor element), which isn't wide enough to contain the tables at their smallest possible width.
My recommendation would be to not try and place all 3 tables side by side. Your display would have to be exceptionally wide in order for it to not look cramped and not have horizontal scrolling.
You can apply the style = "overflow: auto;" to put a horizontal scroll bar at your table. Thus the design will still remain responsive. Follow the code:
.table-scrollable{
overflow: auto;
}
And use it on your parent div:
<div class='table-scrollable'>
Assign the table's container element with overflow: auto; and the table itself with table-layout: fixed;
.ie-table-fix {
overflow: auto;
}
.ie-table-fix > table {
table-layout: fixed;
}