I have the following table (it contains 2 tds, one with a form and the other with a div):
<tr>
<td class='center-column'>
<form>
A Form
</form>
</td>
<td class='right-column'>
<div id='groupWrapper'>
Some Stuff
</div>
</td>
</tr>
When I make the screen smaller (using #media query) I wanted the two td's to be one on top of the other. I managed this successfully with writing in the css:
.center-column{
display:inline;
}
.right-column{
display:inline;
}
Question is: the right-column comes out on bottom. How do I CHANGE THE CSS so that it is on top and the center-column is on bottom?
I need an answer with ONLY CHANGING THE CSS. (I tried to float them right/left but didn't work)
Thanks
Use flex,
Give flex-direction: column-reverse; to tr to achieve this. Resize the window to see the effect.
.center-column {
flex: 1;
}
.right-column {
flex: 1;
}
#media only screen and (max-width: 768px) {
tr {
display: flex;
flex-direction: column-reverse;
}
}
<table>
<tr>
<td class='center-column'>
<form>
A Form
</form>
</td>
<td class='right-column'>
<div id='groupWrapper'>
Some Stuff
</div>
</td>
</tr>
</table>
Related
I'm trying to add a table to my Shopify store, and current have the table setup as the following:
<div class="table-responsive">
<table style="width:100%; table-layout:fixed; border-collapse:separate !important;background-color: #f7f7f7; border-spacing:30px 5px; color:#333333; font-size:16px; line-height:12px; font-weight:100;" class="bodywrapcenter">
<tr>
<td> <i class="fa-solid fa-droplet"></i> Waterproof</td>
<td> <i class="fa-solid fa-leaf"></i> Certified Vegan</td>
</tr>
<tr>
<td> <i class="fa-solid fa-seedling"></i> Natural Rubber</td>
<td> <i class="fa-solid fa-feather"></i> Light Weight</td>
</tr>
</table></div>
However, I'm trying to make the following table show in one rows in mobile. (1 x 4 instead of 2 x 2 on mobile).
I tried adding the the following code for CSS:
.table.bodywrapcenter>tr>td {
width: 100%;
float: left;
}
however, It's still not working.
Can someone please help me? I'm a newbie so detailed instruction would be greatly appreciated.
Thanks in advance!
Perhaps you can do it just with <div> tags instead using table elements. If you can do it this way you can play with display: flex attribute and #mediaqueries to change the view depending on the viewport. I let you an example attached.
.bodywrapcenter {
width: 100%;
display: flex;
flex-flow: row wrap;
background-color: #f7f7f7;
color: #333333;
font-size: 16px;
line-height: 12px;
font-weight: 100;
}
.bodywrapcenter-tr {
display: flex;
flex-flow: row wrap;
flex: 0 0 50%;
}
.bodywrapcenter-td {
display: block;
}
#media only screen and (min-width: 768px) {
.bodywrapcenter-tr {
flex-flow: row wrap;
justify-content: space-around;
}
}
<div class="table-responsive">
<div class="bodywrapcenter">
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Waterproof</div>
<div class="bodywrapcenter-td">Certified Vegan</div>
</div>
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Natural Rubber</div>
<div class="bodywrapcenter-td">Light Weight</div>
</div>
</div>
</div>
For the responsive design, you can use the below CSS and set your preferred style in different widths.
#media only screen and (max-width: 390px) { //your CSS code }
.table-responsive.bodywrapcenter{
display:flex,
flex-wrap:wrap
}
So, basically I have a table row with 2 cells, with the first cell (on the left) containing text, and the right one containing an image. While the screen gets smaller and smaller, I want the image to eventually move under the text. After some research I finally found and understood how the display and flex property works and have solved that issue.
In the table row properties I have inserted
display: flex;
flex-wrap: wrap;
and for each cell you put flex: 1 1 10ch; for example. I have found this here, which certainly explains more and better.
So, now what I want is when the image is repositioned under the text, to shrink when the screen gets smaller than the image itself. The image's size is fixed because with percentage is just gets smaller and does not reposition. I have also tried max-width but it doesn't change anything I think.
<div>
<table style="width: 100%;">
<tbody>
<tr style="display: flex; flex-wrap: wrap;">
<td style="text-align: left; vertical-align: middle; padding: 0 3% 0 0; flex: 3 1 50ch;">
<p>Some random text. Normally, the text is much more.</p>
</td>
<td align="justify" style="padding: 0.5%; flex: 1 1 10ch;"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" width="500" /></td>
</tr>
</tbody>
</table>
</div>
I also lose the vertical alignment for the text. Is there any way to align it to the middle again?
You can apply the object-fit property on the image,
this will resize the image to fit the container:
img{
object-fit: cover;
width: 100%;
height: 100%;
}
Don't use ch as units here. It can be misleading, and doesn't work reliably with variable width fonts. With images, it can be even worse. Stick to em, rem, or even px. I used the latter.
Flex is more flexible than the example had shown you. See the comments in the code.
.tbl {
width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.first {
text-align: left;
vertical-align: middle;
padding: 0 3% 0 0;
flex: 3 1 auto; /*don't care about the basis of this element as it always grows and shrinks as required*/
}
.second {
padding: 0.5%;
flex: 0 1 500px; /* never grow, only shrink when required, 500px basis (from your example) */
}
.second img {
width: 100%; /*The image should always be as wide as its parent allows to be.*/
}
<div>
<table class="tbl">
<tbody>
<tr class="row">
<td class="first">
<p>Some random text. Normally, the text is much more.</p>
</td>
<td align="justify" class="second"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" /></td>
</tr>
</tbody>
</table>
</div>
I am using flexbox in a table.
The table has 2 columns, each with one cell.
The left cell is very big, and has a height of maybe 189%.
My CSS is as follows:
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</td>
<td>
<div id="openemail">
<div id="header">SSS</div>
<div id="body">more SSS</div>
</div>
</td>
</tr>
</table>
As you can see, the flex container ends up in the middle, and is hard to find. My question is: how can I change my CSS so that the flex container is at the top of my table cell?
Would adding vertical-align: top to the table cell do what you want it to do? Like this:
<table id="app">
<tr>
<td>
<div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</td>
<td style="vertical-align: top;">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>
RECOMMENDED:
Applying vertical-align: top to <td> seems to be the optimal solution in 2018, which is fully supported in CSS3 and HTML5. Here's a working sample:
table, th, td {
border: 1px solid black;
}
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist">
placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
<td style="vertical-align: top">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>
To learn more about the vertical-align style: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
NOT RECOMMENDED:
The following solution could also work if you are using older versions of HTML: setting the valign attribute of <td> to be top. It looks something like this:
table, th, td {
border: 1px solid black;
}
#openemail {
display: flex;
flex-flow: column;
height: 100%;
}
#openemail>#header {
flex: 0 1 auto;
}
#openemail>#body {
flex: 1 1 auto;
}
<table id="app">
<tr>
<td>
<div id="emailslist">
placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
<td valign="top">
<div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
</td>
</tr>
</table>
To learn more about the valign attribute: https://www.w3schools.com/tags/att_td_valign.asp
Hope this helps!
Since you're dealing with table cells, the vertical-align property comes into play. This property applies to inline-level and table-cell elements only.
The default value of the vertical-align property, according to the spec, is baseline. However, major browsers tend to use the middle value instead.
In any case, the content of your table cell is vertically centered.
You can override this setting with vertical-align: top.
More details: Default value of vertical-align for table cells
First, sorry for any grammatical mistakes, I'm not an expert in English.
So, what I need is to separate my page in three colums that suport one table, when this table reachs to a, for example, height: 1000px in a colum it will go to the other colum.
I tried to do an quick example in Paint:
Everything that I tried just separate the page in three columns but they don't interact with each other as I want. There's any way to do that?
P.S: This table is created from my database, so it's not a fixed table.
I feel at some point when it's a standard, this would be a decent use-case for CSS Grid Layout, or at least it might be more semantic that way. But for now you can definitely apply flexbox styling to a <table>:
table {
/* forces the table to be full width
even without enough content */
display: block;
}
tbody {
border: 1px solid black;
/* display flex will reflow child elements
once they hit a limit in their parent */
display: flex;
/* flex-flow sets the direction to flow child elements,
and if they should wrap when hitting
the end of their parent */
flex-flow: column wrap;
max-height: 80px;
width: 100%;
}
tr {
border: 1px solid #bad;
/* the 33% (the flex basis) is how i'm
getting 3 columns, adjusting this will adjust
your number of columns, it's not the most general solution,
but it'll work for you case */
flex: 0 0 33%;
}
td {
border: 1px solid #ace;
}
<table>
<tbody>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
<tr>
<td>row data</td>
</tr>
</tbody>
</table>
I think it is possible with flexbox. You set a height for the parent element and add flex-direction: column and flex-direction: wrap
<div class="wrapper">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
.wrapper {
height: 100vh;
width: 450px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.wrapper .element {
background: red;
margin: 10px;
height: 45vh;
width: 100px;
}
http://jsfiddle.net/fyj1htwk/
I'd like to display price and description this way. And when the window width is resized, I want only middle part (inside blue rectangle) to be resized.
The red rectangle's width should not change for any window dimension.
I tried to use <table> tag, but it makes the first part to be wrapped.
Here is HTML snippet for this:
<table class="notfootable">
<tbody>
<tr>
<td><span class="usd">$</span><span class="monthly-cost">744.58</span></td>
<td>
<h4>Monthly Cost</h4>
<p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</td>
</tr>
</tbody>
</table>
Note that <span class="usd"> has the following CSS attributes.
.usd {
vertical-align: top;
display: inline-block;
font-size: 11px;
color: #1587AC;
margin-top: 0.3em;
}
I added display: inline-block to add margin-top.
First, you don't want this to be formed inside of a table tag. It's not tubular data that inside of it. It's content.
Secondly, flexbox can come in handy to address this problem that you're having. It's easy to use and has many options to align your content on the x-axis and the y-axis within a div.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices.
You can read more about flexbox at MDN.
With that in mind, I made a little sample to recreate what you want to achieve.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.info {
display: flex;
}
.price {
display: flex;
align-items: center;
padding-right: 30px;
}
.cta {
display: flex;
width: 100%;
justify-content: flex-end;
}
#media screen and (min-width: 600px) {
.container {
display: flex;
width: 100%;
align-items: center;
}
.info {
width: 80%;
}
.cta {
display: block;
justify-content: initial;
width: 20%;
padding-left: 30px;
box-sizing: border-box;
}
}
<div class="container">
<div class="info">
<div class="price">
<span class="usd">$</span><span class="monthly-cost">744.58</span>
</div>
<div class="description">
<h4>Monthly Cost</h4>
<p>This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</div>
</div>
<div class="cta">
<button>Billing details</button>
</div>
</div>
I believe to accomplish this you can use position: absolute on a <div> surrounding the blue rectangle and use position:relative on the parent container surrounding that element. On all other elements inside that container use position: relative.
Here is a somewhat similar question to yours:
DIV absolute positioning - maintain position after browser window resize
Hope this helps.
Enclose the two span of "usd" and "monthly-cost" within a div that has display display attributes of "inline-block" and a fixed width that is wide enough to accommodate the widest cost amount displays. This should keep those two spans inline as the display width is decreased.
You can make use of flex layouts as below:
HTML:
<div class="main">
<div class="left">
<span class="usd">$</span><span class="monthly-cost">744.58</span>
</div>
<div class="right">
<div class="right-top">
<h4>Monthly Cost</h4>
<p class="nomargin">This includes your Account's Subscription Plan as well as any Add-ons for your Account.</p>
</div>
<div class="right-bottom">
<button>billing details</button>
</div>
</div>
CSS:
.main {
display: flex;
flex-direction: row;
}
.left {
align-self: center;
padding-right: 55px;
}
.right {
flex-direction:column;
}
More on flex layouts:https://css-tricks.com/snippets/css/a-guide-to-flexbox/