I am attempting to vertically align my text in the center of its row regardless of how long the text is in my bootstrap table.
I am attempting to handle this with vertical-align: middle; line-height:90px; At the moment adjusting the line-height seems to work and allow me get text in the center but if the text is two-lines then the line-gap between the two is too large.
How can I vertically align my text in the right column to fit vertically be in the middle of the page?
Here is my code snippet :
.table-bordered th, tbody td:nth-child(2) {
vertical-align: middle;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>ib
<td class="col-6"> <a class="text-underlined-18 ul-link"> Link to article here</a></td>
</tr>
</tbody>
</table>
I am expecting my text to sit in the center of the row similar to this photo without the huge line gap if the text is two-lines:
Change the desired table data element to display: flex;, make the flex-direction: column; and justify-content: center;.
.table-bordered th, tbody td:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld"> Link to article here</a></td>
</tr>
</tbody>
</table>
Related
In previous table's row head sticky was working well. Then I did some changes to the first and second columns fixed. Then after row head sticky is not working. I can not find where I was wrong. I added my code below.
CSS -->
.view {
margin: auto;
width: 100%;
}
.wrapper {
position: relative;
overflow: auto;
white-space: nowrap;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
z-index:1;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100%;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 100%;
left: 100px;
}
th {
background: white;
position: sticky;
top: 0;
}
Table -->
<div class="view">
<div class="wrapper">
<table>
<thead>
<tr>
<th class="sticky-col first-col">Col 1</th>
<th class="sticky-col second-col">Col 2</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col"></td>
<td class="sticky-col second-col"></td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
I have added below CSS to do row head stick in main.handlerbars.
th {
background: white;
position: sticky;
top: 0;
}
If you can give me a fix to solve this will be a huge help. Thank you.
You need to increase the z-index of the sticky left elements. Since you made all the element to be sticky, the latter ones will overlap the previous ones:
.view {
margin: auto;
width: 100%;
}
.wrapper {
position: relative;
overflow: auto;
white-space: nowrap;
height:100px;
}
.sticky-col {
position: sticky;
position: -webkit-sticky;
background-color: white;
}
.first-col {
width: 100px;
min-width: 100px;
max-width: 100%;
left: 0px;
}
.second-col {
width: 150px;
min-width: 150px;
max-width: 100%;
left: 100px;
}
th {
background: white;
position: sticky;
top: 0;
}
th.sticky-col {
z-index:1;
}
<div class="view">
<div class="wrapper">
<table id="app" class='table table-bordered table-sm'>
<thead>
<tr>
<th class="sticky-col first-col">Product</th>
<th class="sticky-col second-col">Description</th>
<th>Lorem ipsum dolor sit amet, consectetur</th>
<th>Lorem ipsum dolor sit amet, consectetur</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
<tr>
<td class="sticky-col first-col">consectetur </td>
<td class="sticky-col second-col">consectetur </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fringilla metus lorem, a malesuada sem tempor ac. Sed auctor, diam sed sodales vulputate, quam enim pulvinar ante, sed sollicitudin arcu est sit amet justo. Donec ac leo blandit, facilisis purus non, fringilla velit. Sed vel tempor eros, vel </td>
</tr>
</tbody>
</table>
</div>
I want to add a sliding animation for sub rows inside a table structure. When using the div tag inside a table, it does not works like a div outside of the table structure. The animation is missing and it is formatting every sub td in the first td of the parent row.
Source code - here the StackBlitz example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr (click)="show = !show">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<ng-container *ngIf="show">
<div class="box" [class.opened]="show">
<tr>
<td>Sam</td>
<td>Sample</td>
<td>35</td>
</tr>
<tr>
<tr>
<td>Piet</td>
<td>Miller</td>
<td>42</td>
</tr>
</div>
</ng-container>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<div style="margin-top: 20px" class="box" [class.opened]="show">
Here the animation is working proper. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>
CSS
.box {
background-color: #FFCC55;
max-height: 0px;
overflow-y: hidden;
transition: ease-in-out 400ms max-height;
}
.box.opened {
max-height: 500px;
transition: ease-in-out 600ms max-height;
}
You only have to remove 'ng-container'. It will solve your problem.
Replace this code
<ng-container *ngIf="show">
<div class="box" [class.opened]="show">
<tr>
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr></tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</div>
</ng-container>
With this one
<div class="box" [class.opened]="show">
<tr>
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr></tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</div>
If you want 'ng-container' should be in your code then put it inside of div (which has the class box). But it slows your animation.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr (click)="show = !show">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<ng-container *ngIf="show">
<tr class="box" [class.opened]="show">
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</ng-container>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<div style="margin-top: 20px" class="box" [class.opened]="show">
Here the animation is working proper. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>
well removed the div from ur table!
I am not quite sure how angular works, but here is the correct way you should implement a collapsible row; just add a new row and a <td colspan="100"> so that this cell expands to the full table width and insert your content there:
<tr>
<td colspan="100">
<div class="box">
your markup here
</div>
</td>
</tr>
Please refer the below URL for the complete reference for your( #FanaticTyp ) expandable tableview.
https://datatables.net/blog/2014-10-02
Script
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<div class="slider">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>'+
'</div>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "/examples/ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
$('div.slider', row.child()).slideUp( function () {
row.child.hide();
tr.removeClass('shown');
} );
}
else {
// Open this row
row.child( format(row.data()), 'no-padding' ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();
}
} );
} );
Expanded View Design
<div class="slider">
... Data to be shown ...
</div>
<style>
div.slider {
display: none;
}
td.details-control {
background: url('/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/examples/resources/details_close.png') no-repeat center center;
}
div.slider {
display: none;
}
table.dataTable tbody td.no-padding {
padding: 0;
}
</style>
I'm stuck on how I'd get this layout, achieved by nested tables and css..
This is my current code, but it's not working properly yet... Can someone tip me in the right direction? Can't seem to figure it out...
<body>
<div id="container">
<table>
<tr>
<td id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
EDIT:
Here an extra IMG example, provided by my teacher:
Here is a solution with different styling based on even-odd table rows.
I think this solution is right, if your teacher wants to drive your css knowledge more deep and wide.
table tr:nth-of-type(odd) .text {
text-align: right;
}
table tr:nth-of-type(odd) .img > img {
float: left;
}
table tr:nth-of-type(even) .text {
text-align: left;
}
table tr:nth-of-type(even) .img > img {
float: right;
}
.text::after {
content: attr(title);
text-align: right;
display: block;
}
<div id="container">
<table>
<tr>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
<tr>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
</table>
</div>
Try this
<table border="1" width="400">
<tr>
<td width="200" style="text-align:justify";>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align:right;">myname</p>
</td>
<td width="200" style="text-align:left; vertical-align: middle;">
image <!-- put image tag here -->
</td>
</tr>
<tr>
<td width="200" style="text-align:right; vertical-align: middle;">
image <!-- put image tag here -->
</td>
<td width="200" style="text-align:justify";>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align:right;">myname</p>
</td>
</tr>
<tr>
<td width="200" style="text-align:right;">
Lorem Ipsum
<p style="text-align:right;">myname</p>
</td>
<td width="200" style="text-align:left; vertical-align: middle;">
image <!-- put image tag here -->
</td>
</tr>
</table>
<table border="1" width="800px" cellpadding="3" cellspacing="0">
<tr>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right" valign="top">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right" valign="top">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
hey u dont need nested tables here is the code
<table width="800" border="0" align="center">
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
<tr>
<td align="left"> your text<p align="right">your name</p></td>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
</tr>
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
</table>
I am using Bootstrap 3. I have text on the left of the page and an image on the right. I am trying to get the text to wrap around an image. I've seen example of this for left aligned images, but I can't seem to get the opposite to work.
To show the error, I have created an example on JSFiddle.
There is a TITLE, then a banner, that should be half the page. They hockey player image should be to the right of the banner and the tops of the 2 images should be aligned, the text should start immediately under the banner, then wrap under the hockey player image. Like a newspaper layout.
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned-->
</div>
<div class="col-xs-12 col-sm-5 pull-right">
<h2> </h2>
<img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/>
</div>
<div class="col-xs-12">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
<div class="col-xs-12">
MORE TEXT HERE
Example Layout here
This may be what you want:
<div class="media">
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4>
...
</div>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
</div>
Is this what you want?I made couple of divs and made it looks simple, you haven't added specific row to your header image, becausse of that both images started to stack inline.And i changed the columns divs.
CODEPEN exapmle
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-xs-12 col-sm-7">
<h2>My Title</span></h2><!-- should be left aligned-->
<img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned-->
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5 pull-right">
<img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/>
</div>
<div class="col-xs-7">
<!-- This text should be under the title image and wrap underneath the larger image on the right-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
</div>
Basically, any UI Framework(Bootstrap) depend on a grid. So you have to do separation of each block and put text different column and image have to put in different column.
.bg-img{
height:200px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL");
background-repeat: no-repeat;
}
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-5 col-sm-5">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>
</div>
<div class="col-xs-7">
<p>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 col-sm-5">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/>
</div>
<div class="col-xs-7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia.
</p>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<div class="bg-img">
<h4> Lorem ipsu6 dolor sit amet</h4>
</div>
</div>
<div class="col-sm-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
</div>
In above snippet I have taken 3 rows. In first row I am setting image in left side, In second row image set in right side and third row image set into first row with text on image. you can run my snippet. Good luck. happy to help.
I have solved with with bootstrap 3, it now behaves correctly:
https://jsfiddle.net/cec9086a/
<div class="container">
<div class="jumbotron">
<div class="row">
<h2>
My Title
</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 pull-left">
<img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/>
</div>
<div class="col-xs-12 col-sm-6 pull-right">
<img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.
</p>
</div>
</div>
</div>
I have a video slider and I use bootstrap for this. Now I've inserted a table within the slider(carousel). It works perfectly but I'm changing the layout. The picture below is the layout I want. I've managed to put the background. The problem is I can't insert a space between the columns of the description. How can I insert space in each of the column?
.rowTwo{
background-color: #491f43;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
h1{
color: #ffffff;
padding: 0px;
}
.txt_txt{
color: #ffffff;
font-size: 10pt;
padding: 0px;
line-height: 0px;
}
body
<div class="item active">
<table class="table table-bordered">
<tr>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
</tr>
<tr>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
</table>
</div>
preview site
Don't know if this will work. but you can have something like this
<div class="item active">
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
<div class="col-lg-12 col-sm-12" style="padding:0px">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
</div>
<div class="col-lg-12 col-sm-12" >
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</div>
</div>
</div>
This puts space between each of the table data cells, coming close to what you are trying to achieve, without all the extra styling.
table {
background-color: transparent;
border-spacing: 30px !important;
border-collapse: separate;
}
td {
border: 2px solid black;
}
<div class="item active">
<table class="table table-bordered">
<tr>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
</tr>
<tr>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
<td class="rowTwo">
<h1>Video Title<h1>
<span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
</td>
</table>
</div>