I'm trying to adapt this hr so that it can appear on mobile on one line. This code is fine for a desktop view but for a mobile device it creates a jump to the line that breaks the hr.
div {
text-align: center;
}
hr {
display: inline-block;
width: 30%;
}
<div class="mcnTextContent">
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<div style="center">
<hr>TOGETHER
<hr>
</div>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
Your estimate of 20px for the width of TOGETHER was way out.
Below I have used 8em but you may want to adjust that a little one way or the other.
div { text-align: center; }
hr { display: inline-block; width: calc((100% - 8em)/2); }
<div class="mcnTextContent">
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<div style="center">
<hr>TOGETHER
<hr>
</div>
<table>
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</div>
Option One:
Use a single, full-width (or maybe something like 90%?) <HR> but move TOGETHER up so that it sits on top.
Option Two:
Use calc in your CSS so that the width of each <HR> is (width of parent - width of TOGETHER) / 2
(Guessing at 30% width is just too fragile in this case).
Related
If I have a situation like this:
<table>
<tbody>
<tr>
<td width="100%">
<table width="640">
<tbody>
<tr>
<td width="100%" id="column1">
<table id="right">
......
</table>
</td>
<td width="100%" id="column2">
<table id="left">
......
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Is it possible to make column1 and column2 the same height without giving a fixed height?
I can't use javascript, and flexbox only css/html is a code not created by me, for email design.
You can simply just apply them same class for height but still keep different id for other properties, so they will always have same height as long as they have the same class:
(Here these are div but same processus with table)
#container{
display: flex;
}
.height{
height: 100px; //and if you want height not fixed just set it auto or fit-content...
}
#width1{
width: 70%;
background-color: red;
}
#width2{
width: 30%;
background-color: blue;
}
<div id="container">
<div id="width1" class="height">
div 1
</div>
<div id="width2" class="height">
div 2
</div>
</div>
I have a div table layout like this:
...but I'd like the nested table on the right to match the height of the table on the left, so that the right table rows are equally spaced apart. It seems that there's some padding going on that's preventing the right table from filling the full height of it's container.
Want I want is this (it's a photoshop mock, but you get the idea):
I do not want to set a fixed height on the outer container. Both left and right table heights should match whichever one is tallest. I'm using a div table solution at the moment to contain the tables because it solves the problem whereby the table containers (light-green) height will match (I'm open to other possible solutions). However, it still leaves the problem of the shorter table not filling the height of it's container, as in the image.
Here's a fiddle.
The HTML:
<div class="outer-container">
<div class="inner-container">
<div class="child">
<table>
<tr>
<td>Label 1a</td>
<td>Value 1a</td>
</tr>
<tr>
<td>Label 1b</td>
<td>Value 1b</td>
</tr>
<tr>
<td>Label 1c</td>
<td>Value 1c</td>
</tr>
<tr>
<td>Label 1d</td>
<td>Value 1d</td>
</tr>
<tr>
<td>Label 1e</td>
<td>Value 1e</td>
</tr>
</table>
</div>
<div class="spacer"></div>
<div class="child">
<table>
<tr>
<td>Label 2a</td>
<td>Value 2a</td>
</tr>
<tr>
<td>Label 2b</td>
<td>Value 2b</td>
</tr>
<tr>
<td>Label 2c</td>
<td>Label 2c</td>
</tr>
</table>
</div>
</div>
</div>
and the styling:
.outer-container {
display: table;
padding: 10px;
background: #5f5f5f;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.inner-container {
display: table-row;
padding: 10px;
margin-top: 50px;
width: 100%;
}
.child {
display: table-cell;
background: #d3e4d1;
border: 1px solid white;
}
.spacer {
display: table-cell;
width: 10%;
}
.child table {
width: 100%;
height: 100%;
padding: 10px;
}
.child td {
width: 50%;
}
.child td:first-child {
text-align: right;
padding-right: 10px;
}
IE8 and up solution required.
The table-cell contents were filling up the height of the cells, the tables (and table cells) were just different sizes because the contents were different and they weren't declared to be the same height.
Here's a very minimal working example: https://jsfiddle.net/egzs1sm3/
If you'd like you could remove the divs they're nested in and just apply the static height to the tables, I don't see why not.
Here's how to accomplish it via flexbox:
https://jsfiddle.net/tqvqsd2y/1/
display:flex on the container is inconsequential, that's just to make to make them be right next to eachother for comparison's sake. No reason you couldn't use that though, I think it's what you wanted.
Me again.
Do they have to be separate tables? Because two cells in the same table would automatically adjust the height and justify the content...
<table>
<tbody>
<tr>
<td>
<h3>
<span>asdf 1</span>
<span>asdf 2</span>
</h3>
<h3>
<span>asdf 1</span>
<span>asdf 2</span>
</h3>
</td>
<td>
<h3>
<span>asdf 1</span>
<span>asdf 2</span>
</h3>
<h3>
<span>asdf 1</span>
<span>asdf 2</span>
</h3>
<h3>
<span>asdf 1</span>
<span>asdf 2</span>
</h3>
</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/7w963q7v/
Notice how different labels are now inline elements within block elements.
I have changed your existing HTML, that will work on IE8 too. Though I didn't tested on it, but I am sure, it won't deviate.
Option 1:
Using a cellspacing on the main table.
Please find the structure below:
<div class="outer-container">
<div class="inner-container">
<table cellspacing="15">
<tbody>
<tr>
<td class="child">
<table>
<!-- put your contents of the first table -->
</table>
</td>
<td class="child">
<table>
<!-- put your contents of the second table -->
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Watch the demo here.
Option 2:
Without using the cellspacing.
<div class="outer-container">
<div class="inner-container">
<table> <!-- no 'cellspacing' here -->
<tbody>
<tr>
<td class="child">
<table>
<!--put your contents of the first table -->
</table>
</td>
<td class="spacer"></td> <!-- class spacer with 'width: 10%' -->
<td class="child">
<table>
<!--put your contents of the second table -->
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Watch the demo here.
Update 1:
See the updated demo:
I don't think, the height of the nested table would be able to occupy the height of the largest table using only CSS. That's why I have made their parents as td, where it fills up the containers and doesn't depends upon the content size of its elements only, but the largest one out of all its siblings td's.
Anyways, one can always target the child elements of any other elements using either JS or CSS.
See the following documents:
<table>
<tr>
<td>
<p>foo bar baz</p>
</td>
</tr>
</table>
and this:
td {
padding: 10px;
border-bottom: 1pt solid gray;
}
which results in something like
The rule is always the width of the table cell. Is there any CSS/HTML way of making the rule smaller (taking up less space horizontally)?
I need the rule to be some specified size which is smaller than the cell width. This is how it should look like (I hope you get the point - and the double dash is easy, of course):
123.44
2312.49
--------
12.12
1231.44
========
1234.33
Do you mean that the bottom border should be shorter than the width of the td? In that case this is not possible, however you could add an element that represents your border and give that element a width shorter than 100%. Technically I would advise a hr but div could do the same thing and is perhaps easier to understand.
HTML
<table>
<tr>
<td>
<p>foo bar baz</p>
<div style="width:75%;border-bottom:1px solid #000;"> </div>
</td>
</tr>
</table>
Live demo
http://jsfiddle.net/Zs9dG/
If you are going to have a paragraph in each table cell, why not put the border on that?
td > p {
display: inline;
border-bottom: 1pt solid gray;
}
Setting the <p> to display: inline will mean the border is as wide as the content inside it. You could then give the table cells more horizontal padding and you should end up with the effect you are after.
You can manage it with the html code, otherwise use ul and li it's much more convenient.
<table>
<tr>
<td>
<p>123.44</p>
</td>
</tr>
<tr>
<td>
<p>12312.49</p>
</td>
</tr>
<tr>
<td>
<p> -------- </p>
</td>
</tr>
<tr>
<td>
<p>12.12</p>
</td>
</tr>
<tr>
<td>
<p>1231.44</p>
</td>
</tr>
<tr>
<td>
<p> ======== </p>
</td>
</tr>
<tr>
<td>
<p> 1234.33 </p>
</td>
</tr>
</table>
I have a table with 2 <tr> and 2 <td>:
<table>
<tr>
<td>
<table>
<!-- other content -->
</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Where the ***** is I need to insert pretty much the same table (which does not contain another table).
but when I debug it the table is left aligned.
Live Example
I want that the table in the upper left box is right aligned (for knowledge: and center aligned).
For example:
The table within is 32px width but the containing td is 64px width.
How can I align the table to the right?
A table is a block-element; text-align and align only works on inline-elements.
So for a block-element you have to use margin:
CSS:
.centered{
margin: 0 auto;
}
.rightaligned{
margin-right: 0;
margin-left: auto;
}
.leftaligned{
margin-left: 0;
margin-right: auto;
}
HTML:
<td>
<table class="leftaligned">
<!-- Other Content -->
</table>
<table class="centered">
<!-- Other Content -->
</table>
<table class="rightaligned">
<!-- Other Content -->
</table>
</td>
This will work in almost every browser, even Internet Explorer 7.
Only the following comes to mind:
<table>
<tr>
<td style="text-align: right"></td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Or another css approach:
table table {
float: right;
}
or inline with float:
<table>
<tr>
<td>
<table style="float: right;">.....</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
In case the td only contains table and no other text or element then below code should also work, only thing it will right align everything in the td and won't work in html5:
<table>
<tr>
<td align="right">*</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Why does the code below not cause the <table> to be vertically-aligned in the middle of the <div>?
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
<table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
I want the <table> in the middle of the <div>, but it is at the top! How can I fix this?
Thanks for your future advice.
Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.
However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.
I’m not sure how many browsers support this though. I’ve checked in Chrome 6, Firefox 2 and Opera 10.5, and they’re fine with it. Internet Explorer could be a different matter.
Have you tried "display:flex;"?
div{
width: 850px;
height: 470px;
display: flex;
/* WIDTH and HEIGHT are required */
justify-content: center;
align-items: center;
}
td, table{
border-collapse: collapse;
border: 1px solid black;
}
<div>
<table>
<tr>
<td>Lorem</td>
<td>Lorem</td>
<td>Lorem</td>
</tr>
<tr>
<td>2019</td>
<td>2018</td>
<td>2017</td>
</tr>
</table>
</div>
Try this:
<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>
table is a block element. To get it to vertically align, I think it needs to be displayed as inline. inline-block will often give you the best of both worlds in situations like these. Cheers!
Its easy. Always use this >> style="vertical-align:middle" << inside every TD. You can use top, middle and bottom. You can push it in the CSS too.
try this:
#centerAligned{
text-align: center;
margin-top: 50%;
}
it worked for me!!