Good Day,
I'm having trouble with my project. Im printing a page using printThis.js.
The problem occurs when creating a new page. The header at page 1 is normal/ok, but in succeeding pages, the padding at the top of the page disappears and the heading or thead will hit the border.
What seems to be the problem in this? Thanks in advance.
HTML
<div class="page">
<table>
<thead>
<tr>
<th style="height:50px;">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>something here</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td style="height:50px;">
footer
</td>
</tr>
</tfoot>
</table>
</div>
CSS
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
background-color: #FFF;
}
table {
border-collapse: collapse !important;
page-break-after:always !important;
}
thead{
display: table-header-group !important;
}
tr, td{
page-break-inside:avoid !important;
page-break-after:auto !important;
}
p{
word-wrap: break-word;
}
This is the screenshot of page1 and page 2
Related
I have a table where I specify width:100% but I don't want to expand one particular column(image column) to expand. It it possible?
Sample example:
body {}
img.consoleIcon,
img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td,
table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
Now the above is simple example of a table without any width specified to it, now I go ahead & apply style width:100% but I don't want the image column(e.g Facebook) to expand.
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
You can set the width on the td element.
Here I define an icon-cell class, on the td element, and I am setting a width in CSS :
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
.icon-cell {
width: 50px;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td class="icon-cell">
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
By applying the fixed width for table columns solved this problem.
Hope it is useful to you.
Here is my Code
<table style="width:100%">
<thead>
<th style="width:35%;">Name</th>
<th style="width:30%;">Age</th>
<th style="width:5%;">Facebook</th>
<th style="width:30%;">Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
In CSS
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
Here is the Working Fiddle
[http://jsfiddle.net/1bn5ke9s/][1]
I'm trying to rearrange a relatively large table (using CSS media query) after the width of a screen reaches a certain point and have it look like this (see image below) when the browser window is squished all the way through:
I've already succeed at deleting the unwanted rows, and getting the basic layout of it.
The Problem is:
the inline block elements below each day of the week need to fit the width of the table, and nothing has worked so far, not flex (maybe I'm not using it correctly) or overflow, or border-box.
HTML (just a table)
<table>
<thead>
<tr>
<th>DAY</th>
<th style="width:300px;">CLASS</th>
<th>TIME</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Speed biking</td>
<td>2pm-4pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Wednesday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Thursday</td>
<td>Speed biking</td>
<td>3pm-5pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Friday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Saturday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Sunday</td>
<td>Endurance biking</td>
<td>10am-4pm</td>
<td>Register</td>
</tr>
</tbody>
</table>
CSS (deletes 2 rows and the "thead", colors every first cell of each row and place that cell above the rest of it's respective row)
#media only screen and (max-width: 530px){
thead, .pasDeClasses{
display: none;
}
td:first-child{
background-color: #4080bc;
color: white;
font-family: Arial;
display: block;
}
tr > td{
border-left: 1px solid white;
max-width: 100%;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
}
table{
min-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: Arial;
}
}
thead{
background-color: #4080bc;
color: white;
}
td{
background-color: #d6d6d6;
padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right:
30px;
text-align: center;
}
You could try absolute-positioning only the last tr elements at the bottom of their parents. notice the position:relative, and display:block on the parent tr
tr{
display:block;position:relative;padding-bottom:20px
}
tr td:last-child{
position:absolute;bottom:0;
width:100%;height:20px
}
This works using the rule that an absolutely positioned element inside of a relatively positioned element will "dock" to the relatively positioned parent-element, rather than the viewport.
I need a table just like describred in Fixed right column table scales to responsive design But when I define a background color using css the rule doesn't apply to the fixed column
Jsfiddle: https://jsfiddle.net/3ckvkr1f/2/
Thanks!
HTML
<div class="table-responsive">
<table class="table-striped" cellpadding="9">
<thead>
<tr>
<th>
col1
</th>
<th>
col2
</th>
<th class="crud-links"> Options</th>
</tr>
</thead>
<tr>
<td>
R1col1 alçkfjalçkfjalkjflaksjflaksj
</td>
<td>
R1col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R2col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R2col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R3col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R3col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
</table>
</div>
CSS:
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
.table-hover th, .table-hover td {
padding: 9px;
}
.table-responsive {
width: inherit;
max-width: 80%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 0;
}
.crud-links{
position: absolute;
overflow:hidden;
width: 91px;
right: 0;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
Are you talking about the ones with the class .crud-links?
If so, just do
tr .crud-links { background: something; }
If you're talking about them not getting the same color as every other in the main part, just do the same, but using tr .crud-links:nth-of-type(odd)
Your css code refers to tbody tag, but You are missing it.
.table-striped > tbody > tr:nth-of-type(2n+1)
Correct yout html code, or change css like this:
.table-striped tr:nth-of-type(2n+1)
/*first three column class name as follow, */
/*tbody used for only tr td work otherwise table header also work with bgcolor*/
/*fixed column first three column hover color change*/
tbody > tr:hover > .freez,
tbody >tr:hover > .freez2,
tbody> tr:hover > .freez3{
background-color:#f5f5f5 !important;
}
I have a table using jQuery datatables with some rows in it.
Per this example, the table could look something like this:
https://jsfiddle.net/ef42942g/
I want to use CSS to change the way the table rows are shown so the final result will look something like this: https://jsfiddle.net/hamx5tas/ (please ignore the actual code)
It's very important to keep the basic table structure. I want that the change will be made entirely using CSS (if at all possible).
I have tried various changes to the tr's and td's css but with not much luck.
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>
I will appreciate any help that can be handed.
Thanks in advance.
You can adjust the layout using CSS flexbox. No changes necessary to the HTML.
CSS
thead > tr { display: none; }
tbody { display: flex; }
tbody > tr {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px;
border: 1px solid black;
}
tbody > tr > td {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 5px;
}
tbody > tr > td img {
width: 100px;
height: 65px;
}
tbody > tr > td:last-child {
flex-direction: row;
}
tbody > tr > td:last-child button {
margin: 5px;
}
Revised Demo
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.
You can achieve what you want with pure CSS, changing the display property.
In this way, let's say that the table will not behave like a table anymore.
After that, you just have to adjust minor details to achieve your goal.
CSS:
tr {
width: 120px;
display: inline-block;
padding: 5px;
border: 1px solid black;
margin-right: 20px;
}
td {
padding: 5px;
display: block;
text-align: center;
}
Check it here: JSFiddle.
Hope it helps!
Setting the display on the td elements to block, and the display on the tr elements to inline-block gets you most of the way there.
td { padding: 5px;
border-bottom: none;
border-right:1px solid black;
display:block;}
tr{
display:inline-block;
}
thead{
display: none;
}
It sounds like you have some specific requirements for the format, so I won't go into further detail on assumptions, but from here you should be able to get what you want by turning borders on and off where needed.
https://jsfiddle.net/ef42942g/3/
I saw that Op wanted the structure unaltered so I had to go back to the drawing board. The following are the CSS changes:
Assigned display: none; to <thead>
Made the 3 tr into display: inline-table
Made all of the td to tr
Made the .main table 90vw which...
...made it easy for me to get the 3 tables symmetrical...
...some margins and padding...
...compared to the model we were provided, my table are 2px further apart, 10px wider, and 20px taller.
Fiddle
Snippet
thead {
display: none;
}
table {
width: 90vw;
}
tr {
display: inline-table;
outline: 1px solid black;
margin: 10px 5px;
}
td {
padding: 10px 15px;
display: table-row;
height: 30px;
text-align: center;
}
img {
width: 120px;
margin: 10px 15px;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>
I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.
In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:
Desired result:
aaaaaaaa
bbbbbbbc
cccccccc
HTML-code:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow:scroll;
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>
Thank you for your help.
Two things:
You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>
The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.
I have modified your snippet:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow: auto; /* changed this */
word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>
Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td
However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.
You could work around this by setting display:block on that table cell. (like this)
But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:
Like so:
FIDDLE
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width: 100px;
height: 200px;
max-width: 100px;
min-width: 100px;
}
.td_size span {
overflow: auto;
display: block;
max-height: 200px;
word-wrap: break-word;
}
<h2>Ticket details</h2>
<table>
<tr>
<th>Requester</th>
<td>^User^</td>
</tr>
<tr>
<th>Submitted by</th>
<td>®User®</td>
</tr>
<tr>
<th>Service</th>
<td>#GLOBAL END USER WORKPLACE#</td>
</tr>
<tr>
<th>CI</th>
<td>+N/A+</td>
</tr>
<tr>
<th>Source</th>
<td>#Event#</td>
</tr>
<tr>
<th>Category</th>
<td>&Request Fulfillment&</td>
</tr>
<tr>
<th>Impact</th>
<td>!None - No Degradation of Service!</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Assignment</th>
</tr>
<tr>
<th>Group</th>
<td>]Team]</td>
</tr>
<tr>
<th>Staff</th>
<td>[User[</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Description</th>
</tr>
<tr>
<td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
</td>
</tr>
</table>
First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts
Try it
you may use word-wrap: break-word; or <br> tag where you want to break the word