I have this in HTML.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">mid<br>middle<br>middddle</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Looks like so
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
But I want this
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
How can I get there with CSS??
EDIT: added with checkbox instead of simple text
Solutions with justify-content works like a charm - but with a checkbox the seems to be ignored. I replaced for example the checkbox with a string cause I did not expect to have it behave different - I was wrong.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;"><span style="display:flex; justify-content: center;"><input type="checkbox"/>mid<br><input type="checkbox"/>middle<br><input type="checkbox"/>middddle</span></td>
<td style="text-align: right;">right</td>
</tr>
</table>
The below code will help you with your requirement.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">
<span style="text-align: left; display: inline-block;">mid<br>middle<br>middddle</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
You can assign to the middle td display:flex; and wrap your middle td content in a div container. Like that:
.m-td {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.m-td div{
text-align: left;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
<div>
mid<br>middle<br>middddle
</div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Update
Thank you for hint #NikeshKp. For some reasons try to avoid use flexbox in the table.
Don't use flex property on tables. If used on mailers it will not work
in some email service providers like outlook.
Here the answer without flex.
.m-td {
text-align: center;
}
.m-td div{
text-align: left;
display: inline-block;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
<div>
mid<br>middle<br>middddle
</div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
You can achieve it like this. Hope that how you want it to look.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;">
<span style="display:flex; justify-content:center">
mid<br>middle<br>middddle
</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Related
It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>
People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>
I want to create a table with stuff in it like this:
What I have right now:
<table class="table">
<td>
<tr>
<div style="width: 100px;height:100px; background-color: blue;"></div>
</tr>
<tr>
<div style="width: 100px;height:100px; background-color: red;"></div>
</tr>
</td>
<td>
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</table>
Use rowspan, and td cannot be direct child of a table.
table {
border-collapse: collapse;
}
td {
width: 100px;
text-align: center;
vertical-align: middle;
}
.blue {
background-color: royalblue;
height: 100px;
}
.yellow {
background-color: yellow;
height: 200px;
}
.red {
background-color: red;
height: 100px;
}
<table>
<tr>
<td class="blue">1</td>
<td class="yellow" rowspan="2">3</td>
</tr>
<tr>
<td class="red">2</td>
</tr>
</table>
Well, firstly, your table syntax is off. It should look like this.
<table>
<tr>
<td> </td>
</tr>
</table>
Next, what you want is the first row to have two columns, with the second column taking up the space of two rows. The next row will have one column. This can be done using rowspan.
Here's your refactored code.
<table class="table">
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: blue;"></div>
</td>
<td rowspan="2">
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</tr>
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: red;"></div>
</td>
</tr>
</table>
Your code must like this: use rowspan for second td
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px;height:100px; background-color: blue;"></td>
<td rowspan="2" style="width: 100px;height:200px; background-color: yellow;"></td>
</tr>
<tr>
<td style="width: 100px;height:100px; background-color: red;"></td>
</tr>
</table>
</tr>
</table>
I have a html that when the window shrinks, the content of sub divs gets cutoff. Even though the outermost div is overflow:auto, and there is a scroll bar..
I notice that overflow:hidden is set in multiple child divs. The thing is the inner html are generated from some API and it would impractical to reset all these overflow properties.
My question is:
the height/width of these child divs are not set, why the overflow property still applies?
is there another way to prevent cutoff in child div? Like making sure the parent div has enough height?
Below is a simplified version of my html:
<div id="main" style="width: 100%; height: 100%; overflow: auto; -ms-zoom: 1;" abp="1">
<div style="box-sizing:border-box">
<div style="overflow:hidden;text-align:left">
<div id="SecListA" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
<div>
<span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section A</span>
</div>
</div>
</div>
</div>
<div style="box-sizing:border-box">
<div style="overflow:hidden;text-align:left">
<div id="SecListB" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
<div>
<span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section B</span>
</div>
<table class="skTbl" id="MRLTable-CVIntList280">
<thead abp="416">
<tr class="visHid colHdr" abp="417">
<th class="rIndent" abp="418"></th>
<th class="hlImp" style="width: 96%;" abp="419"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
<th style="width: 1%;"></th>
</tr>
</thead>
<tbody abp="424">
<tr style="display: none;" abp="425">
<td abp="426"></td>
</tr>
<tr>
<td abp="428"></td>
<td abp="429">
<div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle A
</td>
<td abp="433">
<span abp="434"></span>
</td>
<td abp="435"><span abp="436"></span></td>
<td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
<td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
<tbody abp="463">
<tr class="noLn" abp="464">
<td class="skForceFitCell" abp="465">
<span abp="466">
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none;" abp="425">
<td abp="426"></td>
</tr>
<tr>
<td abp="428"></td>
<td abp="429">
<div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle B
</td>
<td abp="433">
<span abp="434"></span>
</td>
<td abp="435"><span abp="436"></span></td>
<td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
<td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
<tbody abp="463">
<tr class="noLn" abp="464">
<td class="skForceFitCell" abp="465">
<span abp="466">
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr title="Edit this item">
<td abp="442"></td>
<td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah B</span>
</td>
<td abp="448"><span></span></td>
<td abp="450"><span></span></td>
<td abp="452"><span></span></td>
<td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td></td>
<td colspan="5">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<span>
<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">
<tbody abp="468">
<tr abp="469">
<td style="padding-left: 40px;" abp="470"></td>
<td style="width: 100%; text-align: left;" abp="471">
<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">
some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd
</span>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Thats just how overflow works. If you set it to hidden on a div, any content that flows outside of its boundaries, regardless of what makes it flow outside, it gets clipped.
Ideally the proper solution would be to change the markup. However, if you really can't, you can hack it with css using !important:
#main div {
overflow: initial !important;
}
#main {
width: initial !important;
overflow: initial !important;
}
div#SecListB {
overflow: initial !important;
}
Check out a fiddle here.
This text...
some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.
is most likely the cause (it appears several times). It contains one extremely long "word" which forces the table-cell which is in to be extended. But that's completely unrealistic. Use real text with real word lenghts, this will change the whole scenario.
(If you don't want to type text, just google "blindtext generator" - there are pages that generate random text for you which you can copy.)
I must modify some legacy code that uses the deprecated way to layout a page with <table>.
The expected layout should be:
-------------------------|^|
row1,col1 |---------| | X: a long 2nd inner table
---------------|---------| | S: a vertical scroll bar
row2,col1 |-----X---|S|
---------------|---------| |
row3,col1 |---------| |
---------------|---------|_|
row4,col1 | row4,col2 |
---------------------------|
row5,col1 | row5,col2 |
---------------------------|
Where the rows must be o a fixed height and the [X] content (that spans on 3 rows), should then have a vertical scroll bar.
Here a sample code. Anyhow it doesn't keep the rows at a fixed height, neither it shows the scroll bar, it just enlarges the external table to fit the long internal one:
<html>
<body>
<table border="1" style="width: 100%; height: 400px;">
<tbody>
<tr style="width: 100%; height: 55px;">
<td style="vertical-align: top; width: 75%; height: 40px;">row 1</td>
<td style="width: 20%; height: 55px;" rowspan="3">
<div style="height 55px; overflow: scroll;">
<table border="1" cellpadding="0" cellspacing="0" style="width: 90%; height: 90px;">
<tbody>
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td></tr>
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
<!-- ... -->
<!-- Many other similar rows here -->
<!-- ... -->
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
</tbody>
</table>
</div>
</td></tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 2</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 3</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 4</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 5</td> </tr>
</tbody>
</table>
<div>2016 - bottom line</div>
</body></html>
Any suggestion is really welcome.
I've tried everything but nothing short of setting the outer-most table's border to 0 works. I want to get rid of the line below the cell with "big cell text" in it. Code is pretty messy but here's the link to jsfiddle so you could... fiddle around with it. The code to the table structure is exactly the same as what I use in the site but obviously the data is replaced.
Any clues?
Set border-bottom and border-top to none: http://jsfiddle.net/nUrE7/
Here you go. Added border-bottom:none; and border-top:none; in your code.
<table cellspacing="0" cellpadding="1" border="1" style="width: 100%;">
<tr >
<td colspan="7" border="0" style="width: 100%; text-align: left; height: 100px; vertical-align:middle;border-bottom:none;"> big cell text </td>
</tr>
<tr border="0">
<td colspan="7" border="0" style="width: 100%; text-align: left; vertical-align:middle;border-top:none; "><table cellspacing="0" cellpadding="1" border="0" style="width: 100%;">
<tr border="0">
<td border="0" width="10%"><strong>1:</strong></td>
<td border="0" width="90%" style="text-align: left;">text1</td>
</tr>
<tr border="0">
<td border="0" width="10%"><strong>2: </strong></td>
<td border="0" width="90%" style="text-align: left;">text2</td>
</tr>
</table></td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%;text-align: right;">Total</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">a</td>
<td style="width: 13%; text-align: right; height: 20px; vertical-align:middle;">b</td>
</tr>
<tr border="0">
<td colspan="5" style="width: 74%; vertical-align:middle; text-align: center; height: 20px;"><strong>c</strong></td>
<td colspan="2" style="width: 26%; text-align: center; height: 20px; vertical-align:middle;">d</td>
</tr>
</table>