I want to align table inside div to right side of the div, but they are aligned to left, what is wrong with my css? I have table inside the div, which contains a text and a picture, what I want is to place the table on right hand side use align=right in table. And some tables I would like to align on the left side, how can I align some tables on right side in a page or some tables in left side in the same page? Thanks
<!DOCTYPE html>
<html>
<head>
<title>Landing</title>
<style>
.form-section{
margin:15px;
}
</style>
</head>
<body>
<div class="jumbotron" align="center">
<img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
<h2></h2>
</div>
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<form class="form-horizontal">
<table align="right">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:22
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
<br>
<table align="right">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:21
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
<br>
<style>
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: 50%;
margein:0px
}
.row {
display: flex;
}
td { white-space:pre }
</style>
Please update your code as per this. The problem, .row should have 'col-` as their child as a standard practice.
.multiline
{
padding:0px;
white-space: pre-wrap;
height: 100px;
width: 50%;
margein:0px
}
td { white-space:pre }
.user-table{width:100%;}
.user-table tr > td{
text-align:right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron" align="center">
<img src="/static/img/Chaatz-192x192px.jpg" class="img-responsive" alt="Responsive image" style="width:10%;height:10%">
<h2></h2>
</div>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-12 col-md-12">
<table class="user-table">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:22
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
</div>
<div class="col-sm-12">
<table class="user-table">
<tr>
<td>
test(user11)
H111i
2016-08-12 07:46:21
</td>
<td><img src=http://d2h8t8into6exa.cloudfront.net/user_comic_avatars/VkKDIkBHsd.jpg alt="Smiley face" height="80" width="80"></td>
<tr>
</table>
</div>
</form>
</div>
<div>
Related
I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William
.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>
Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps
What I am trying is to display message row by row, and finally display a text box for input to send message, now the problem I faced is that I can display the message row by row, however the text box will be show near to the display message horizontally. The text box cannot be show at the bottom row of the page. Here is the unexpected result image. I tried many ways but seems cannot solve it.
Edited: And I need to display incoming message on left side and outgoing message on the right hand side
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<table>
<tr>
<td bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
<tr>
<td bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="" alt="Smiley face" height="80" width="80">
</td>
<td></td>
<td></td>
<tr>
</table>
<br/>
<br/>
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr>
<td>
<input type="text" id="body" name="body" style="width:700px;height:50px;">
</td>
<td>
<button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
</td>
</tr>
<br>
</form>
</table>
</div>
Use display: inline-table then float:right; and float:left if you want a <td> to be wider than the other <td>, use colspan. All and more properties and attributes are used in the Snippet below:
SNIPPET
.msg {
display: inline-table;
table-layout: fixed;
border-collapse: collapse;
width: 50%;
}
.left {
float: left;
text-align: left;
}
.right {
float: right;
text-align: right;
}
.input {
width: 100%;
}
img {
display: block;
padding:0 80% 0 0;
margin: 0 auto 0 0;
}
<div class="container">
<div class="row">
<div class="row" style="width:100%">
<form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
<table class='left msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='right msg'>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() blah,blah,blah 2016-08-12 04:44:20
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
<tr>
<td colspan='2' bgcolor="#CCFFEE">
test() Hi 2016-08-12 04:43:16
</td>
<td>
<img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
</td>
<tr>
</table>
<table class='input msg'>
<tr>
<td colspan='5'>
<input type="text" id="body" name="body" style="width:100%;height:50px;">
</td>
<td>
<input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
if you are using Twitter Bootstrap in this,
insert <div class="clearfix"></div>
just before
<table>
<form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
<tr><td><input type="text" id="body" name="body" style="width:700px;height:50px;"></td>
<td><button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button></td>
</tr><br>
</form>
</table>
css:
table,
tr{
width:100%;
}
If the table is not compulsory for you, then you can use flex-box
You can understand the advantage of using flexbox after executing the following code snippet.
It is more customisable and in my html code, The position of image is before message. But in the output for sent message, image is coming after message.
.row{
display: flex;
align-items: center;
}
img{
width: 35px;
}
.reciever{
justify-content: flex-start;
}
.sender{
justify-content: flex-end;
}
.sent, .recieve{
align-items: center;
display: flex;
max-width: 50%;
}
.sent{
flex-direction: row-reverse;
}
form{
padding: 1em;
text-align: center;
}
input{
width: 85%;
height: 20px;
}
button{
height: 25px;
}
<div class="container">
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 1</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 1</span>
</div>
</div>
<div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 2</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 2</span>
</div>
</div><div class="row sender">
<div class="sent">
<img src="http://www.carderator.com/assets/avatar_placeholder_small.png" alt="">
<span>sent message 3</span>
</div>
</div>
<div class="row reciever">
<div class="recieve">
<img src="http://www.quantumphotonics.uottawa.ca/wp-content/uploads/2014/09/portrait_placeholder.png" alt="">
<span>recieved message 3</span>
</div>
</div>
<form action="">
<input type="text" >
<button>Submit</button>
</form>
</div>
Here is the working Demo
I have 4 divs and 4 images and each of them has an ID. I need to show another div when you hover the first div's image.
I wrote this code but only the first image with ID="insta2" and div ID="iinsta2" worked.
<style type="text/css">
#insta1{display:none}
#insta2{display:none}
#insta3{display:none}
#insta4{display:none}
#iinsta1:hover + #insta1 {
display: block;
}
#iinsta2:hover + #insta2 {
display: block;
}
#iinsta3:hover + #insta3 {
display: block;
}
#iinsta4:hover + #insta4 {
display: block;
}
</style>
And body:
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1"><p> Hover 1 </p></div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2"> <p> Hover </p></div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta3"><p> Hover 3 </p></div>
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta4"> <p> Hover 4 </p> </div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
</td>
</tr>
Use this way:
#insta1,
#insta2,
#insta3,
#insta4 {
display: none;
}
#iinsta1:hover + #insta1,
#iinsta2:hover + #insta2,
#iinsta3:hover + #insta3,
#iinsta4:hover + #insta4 {
display: block;
}
<table>
<tr>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<div id="insta1">
<p>Hover 1</p>
</div>
<img id="iinsta2" src="url" style="width:100% ; height:auto">
<div id="insta2">
<p>Hover</p>
</div>
</td>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta1" src="url" style="width:100% ; height:auto">
</td>
<td colspan="3" rowspan="2" style="text-align:center; width:30%">
<img id="iinsta3" src="url" style="width:100% ; height:auto">
<div id="insta3">
<p>Hover 3</p>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="text-align:center; width:40%">
<img id="iinsta4" src="url" style="width:100% ; height:auto">
<div id="insta4">
<p>Hover 4</p>
</div>
</td>
</tr>
</table>
The + object can be used only with siblings that are next. Also, I have reduced your CSS. Please use absolute positions for positioning the :hovers. And, if you wanna maintain the HTML layout, you need to use JavaScript for this.
img ~ p {
visibility: hidden;
}
img:hover ~ p {
visibility: visible;
}
<table border=1>
<tr>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
<td>
<div class="item">
<h1>Hover 1</h1>
<img src="http://placekitten.com/100" />
<p>Hover</p>
</div>
</td>
</tr>
</table>
The example here seems complicated so I boiled it down to what I understood the question to be. I hope this helps. Feed back is welcome.
I have a table that is inside of a div. In responsive mode, the table goes outside of the div area and looks like this:
I am trying to have the table move to center in responsive mode. I want it to look like this:
Currently, when the screen width gets small, the table will not get close enough to the left to fit in the container. I do not want the table to go outside of the container.
Does anyone know how I can accomplish this?
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How about adding
overflow-x: auto;
To the div.inner element. Altough I´m not sure if this is what you want. Your CSS would be something like
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto; // When the table exceeds the size of the container, the container creates a scrollbar.
}
I took the liberty of adding a second cell for demostrations sake.
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: hand;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
overflow-x: auto;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="401" height="400" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td width="401" height="400" align="center" valign="middle" bgcolor="red">Cell 2</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try the img-responsive class on your images like this:
<!DOCTYPE html>
<html>
<head>
<style>
.slice-table {
vertical-align: middle;
display: block;
cursor: pointer;
cursor: grab;
}
.inner {
width: 50%;
margin: 0 auto;
font-size: 6px;
color: #FFFFFF;
}
.spacer-20 {
font-size: 0;
height: 20px;
line-height: 0;
}
</style>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="st-container">
<div class="st-content" id="content">
<div class="st-content-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
<!-- Progress table -->
<div>
<div class="inner">
<table id="Table_01" class="table-responsive" width="401" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="38">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_01.png' %}" width="400" height="4" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/spacer.gif' %}" width="1" height="4" alt="">
</td>
</tr>
<tr>
<td rowspan="48">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_02.png' %}" width="2" height="395" alt="">
</td>
<td width="61" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 1</td>
<td rowspan="5">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_04.png' %}" width="2" height="50" alt="">
</td>
<td width="58" height="48" colspan="3" rowspan="3" align="center" valign="middle" bgcolor="#75904A">Cell 2</td>
<td colspan="27">
<img class="slice-table img-responsive" src="{% static 'shared/app/images/floor-plan/floorplan_06.png' %}" width="212" height="2" alt="">
</td>
<td width="62" height="206" colspan="2" rowspan="24" align="center" valign="middle" bgcolor="#75904A">Cell 3</td>
<td rowspan="48">
<img class="slice-table img-responsive" src="#" width="3" height="395" alt="">
</td>
<td>
<img class="slice-table img-responsive" src="#" width="1" height="2" alt="">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have two images inside a cell. I want one to be aligned in the middle of the cell and another in the top right corner of the cell. The right top corner image should overlay the centered imaged.
I want it to make it look exactly like this
https://jsfiddle.net/5bL56a34/
but without specifying the left margin since centered image can have a different size.
Here is the HTML code I got right now
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
and CSS
.topRight
{
position:absolute;
left:495px;
}
I guess you want something like this
.topRight {
position: absolute;
top: 0;
right: 0;
}
td{position: relative;}
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
You can use right property instead of left and the give position:relative; to the td element.
.topRight {
position: absolute;
right: 1px;
top: 1px;
}
td
{
position: relative;
}
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
Jsfiddle