I'm trying to align an image with text in a table such that the image is aligned to the bottom of the text.
The current code I have for the table is:
<table class="table table-striped">
<thead>
<tr>
<th><h4><img src="image.png" />Title1</h4></th>
<th><h4><img src="image2.png" />Title2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
</tbody>
</table>
It currently looks like this:
How do I make the image align to the bottom of the text?
Maybe this will do it...
<table class="table table-striped">
<thead>
<tr>
<th><h4><img src="image.png" style="vertical-align: text-bottom;" />Title1</h4></th>
<th><h4><img src="image2.png" style="vertical-align: text-bottom;" />Title2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
</tbody>
</table>
It uses the style attribute -VERTICAL-ALIGN and assigns the value TEXT-BOTTOM
Related
I want put image in box, right before text I use this code but image goes up or down !
<table>
<thead>
<tr>
<th width="121">Download link</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://upload7.ir/up/icon-article-navy.png" alt="" width="20" height="20" class="dlboxicon" />[xfgiven_download]<a href="[xfvalue_download]"> [xfgiven_name] [xfvalue_name] [/xfgiven_name]</td>[/xfgiven_download] <a/>
</tr>
</tbody>
</table>
Your structure has tag closing mistakes. Compare your structure with below structure.
<table>
<thead>
<tr>
<th width="121">Download link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="https://i.stack.imgur.com/ctwrd.png" alt="" width="20" height="20" class="dlboxicon" />[xfgiven_download]
[xfgiven_name] [xfvalue_name] [/xfgiven_name][/xfgiven_download]
</td>
</tr>
</tbody>
</table>
Add the style "float:left" to your image tag to align it with the text side by side.
your HTML should become something like;
<table>
<thead>
<tr>
<th width="121">Download link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="https://upload7.ir/up/icon-article-navy.png" alt="" width="20" height="20" class="dlboxicon"
style="float: left;">[xfgiven_download]<a href="[xfvalue_download]"> [xfgiven_name] [xfvalue_name]
[/xfgiven_name]
</td>[/xfgiven_download]
<a />
</tr>
</tbody>
Hope it helps!
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
I need to do table like this (on picture).
But it is important to be a bootstrap table, so what you see on picture can have only 3 table rows, not 6 because I want to use style
table class="table table-striped table-hover"
Is it possible?
The colspan and rowspan attribute should do the trick.
Try this code:
<div class="table-responsive" style='width:50%'>
<table class="table table-striped table-hover">
<tr>
<td rowspan="3">Name</td>
<td>Sex</td>
<td>Age</td>
</tr>
<tr>
<td colspan="2">Junmar Jose</td>
</tr>
<tr>
<td colspan="2">Weslie Andrea Lavita</td>
</tr>
<tr>
<td rowspan="3">Name</td>
<td>Sex</td>
<td>Age</td>
</tr>
<tr>
<td colspan="2">Junmar Jose</td>
</tr>
<tr>
<td colspan="2">Weslie Andrea Lavita</td>
</tr>
</table>
</div>
Here's a screenshot of the output:
This is just a dummy data to show how the columns and rows are separated.
Hope this helps! Goodluck!
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>