I'm struggling to set custom widths of div elements inside a table cell. Various questions (e.g.) talk about position and display parameters, and I've tried too many variation to describe without success. I'd greatly appreciate it if someone could either assist to get this minimal example working, or refer me to a specific previous answer that does actually solve this problem. Thanks in advance.
In the example I want to set the divs as horizontal bars to reflect the values. The table is fixed with and all div ancestors set to width: 100%.
.bar-column {
width: 100%;
}
.bar {
/* some other tested parameters.. */
/* position: absolute; */
/* display: block; float: left; */
/* display: table-cell; */
position: relative;
display: inline-block;
height: 100%;
background-color: yellow;
}
tr { width: 100%; }
<table width="600px" style="background-color: #ddd;">
<tr>
<th>Value</th>
<th class="bar-column">Name and bar</th>
</tr>
<tr>
<td>20</td>
<td class="bar-column">
<div width="50%" class="bar"><a class="link" href="#">twenty</a></div>
</td>
</tr>
<tr>
<td>40</td>
<td class="bar-column">
<div width="100%" class="bar"><a class="link" href="#">forty</a></div>
</td>
</tr>
<tr>
<td>10</td>
<td class="bar-column">
<div width="25%" class="bar"><a class="link" href="#">ten</a></div>
</td>
</tr>
</table>
The problem is using width="100%" for div when you need to use style="width:100%"
So for following line:
<div width="100%" class="bar"><a class="link" href="#">twenty</a></div>
Should be:
<div style="width:100%" class="bar"><a class="link" href="#">twenty</a></div>
Apply that for lines for the div containing 50% and 25%
Related
As in the BEM methodology is better Nativity elements nested within elements
I have the following markup:
<table class="product-list">
<tr>
<th>Your Items</th>
<th>Price</th>
<th>Qty</th>
<th>Remove</th>
</tr>
<tr>
<div class="product-list__wrapper-img"><img src="./images/mini-cart/1.jpg"></div>
</tr>
</table>
I have a block .product-list, it has the element .product-list__wrapper-img , in it there is a picture <img src="./images/mini-cart/1.jpg">
Stylizing the block I put
.product-list{
width: 680px
}
.product-list__wrapper-img{
position:relative;
z-index:0;
width: 77px;
height: 90px
}
.product-list__wrapper-img img {
position: absolute
z-index: 1
top: 50%
left: 50%
transform: translate(-50%, -50%)
max-width: 98%
max-height: 98%
}
I know that seems to be in the BEM to the tags contact is not desirable, i.e., so seems to be impossible to write
.product-list__wrapper-img img{
}
But what when give the img class to style it, and whether in the BEM , to be the element in the element.
I know that modificator can but the element I know.
I guess I need to call this picture
.product-list__img maybe
.product-list__wrapper-img__img
I would be glad for any help in this matter.
imho:
<table class="product-list">
<tr>
<td>
<div class="product-list__wrapper-img">
<img class="product-list__img" src="./images/mini-cart/1.jpg">
</div>
</td>
</tr>
</table>
or:
<table class="product-list">
<tr>
<td class="product">
<div class="product__wrapper">
<img class="product__img" src="./images/mini-cart/1.jpg">
</div>
</td>
</tr>
</table>
Ive tried a slew of different topics to figure this out...so far nothing has worked. Take a look at this:
http://jsfiddle.net/zJTM8/
Notice how the price on the first example wont align vertically? I've tried 50% top, top -22px, etc. I'm not sure what I'm doing wrong here to make sure that both the product name and the product price stay mid aligned vertically on both divs.... I know its something easy I'm merely gapping on. THE CATCH is that it HAS TO WORK WITH IE7.
<div id="col_product_full">
<div style="padding: 1px;">
<table width="100%" border="0" cellspacing="0">
<tr>
<td align="center" class="contentselection_product_ImageCell">
<img src="http://76.73.18.245/olmsv2/DATA/MEDIA/PRODUCTS/201211038470.jpg">
</td>
</tr>
<tr>
<td height="44" class="contentselection_product_NameBar">
<div class="contentselection_product_Name" style="position: relative; display: block; float: left; width: 60%;">HP 8470p i5 1600 x 900 with Camera 320GB</div>
<div class="contentselection_product_Price" style="position: relative; z-index: 99; display: block; float: right; width: 30%;" align="right">$3,493.21</div>
</td>
</tr>
</table>
</div>
</div>
I want to display a vertical text on the header of a table; the header has a fixed height. And I want to hidden the overflow too.
My html is:
<table border='1px solid black'>
<thead>
<tr style='font-weight:bold; color:blue'>
<td width="60"> Data </td>
<td width="35"> Voto </td>
<td width="50"> Tipo </td>
<td width="10"> I </td>
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;overflow:hidden;"> Hi everybody </div>
</span>
</th>
<td> Annotazioni </td>
</tr>
</thead>
</table>
And my CSS:
table
{
border-collapse:collapse;
table-layout: fixed;
width: 400px;
}
th span {
writing-mode: tb-rl;
filter: flipv fliph;
-webkit-transform:rotate(-90deg);
white-space:nowrap;
display:block;
}
I have a problem: it appears only a couple of letters of the vertical text. Why?
Here you can see better: Example
Thank you very much for your help!
This seems like a strange layout for a table, and I'm not sure of the use case. Therefore, I'm not sure how flexible it needs to be, but adding this to th span fixes your example:
width: 200px;
text-align: center;
margin-left: -90px;
Also, add vertical-align: middle; to its containing th.
http://jsfiddle.net/m7nfU/22/
Remove overflow: hidden on the div encasing "Hi Everybody" which is hiding the rest of the letters.
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;">Hi everybody</div>
</span>
</th>
Then add, vertical-align: middle to the parent <th>, I further had to add a negative margin to make "Hi Everybody" to match the centre, as the text string started from the centre origin.
Fiddle: http://jsfiddle.net/m7nfU/24/
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>
I have a div in the html and after the Div and I have another div which contains the HTml table Which is coming on the top of div. How to bring the table down.
<div id='testupdate2' >Mynumber: ". $num." </div>
<div id="test">
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tbody>
<tr>
<td id="Header" class="navUPD">MY number</td>
</tr>
<tr>
<td id="tls" class="navUPD">MY DETAILS </td>
</tr>
<tr>
<td id="mgmnt" class="navOFFTDUPD"> ADDR. MGMT </td>
</tr>
</tbody>
</table>
</div>
How to bring the table down to the DIV?
To push your table off the top of your <div id="test"> you can use CSS padding:
#test {
padding-top: 20px;
}
Or alternatively:
#test table {
padding-top: 20px;
}
If you have something else in <div id="test"> except that table and you want to table be always aligned to bottom of the div, you can do something like this in your CSS
#id{
position: relative;
}
#id table{
position: absolute; /*this is absolute to #id not to body tag*/
bottom: 0px;
left: 0px;
}
This should do the job, I think (I didn't check it).