I want to split container into three sections and it's already done but I can't figure out how to align all these sections vertically.
HTML:
<table width="100%">
<tbody>
<tr>
<td class="description">
<div>
<section class="col">
<h4>Description1</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</section>
<section class="col">
<h4>Description2</h4>
<div>blablalblablablalbla</div>
</section>
<section class="col">
<h4>Description3</h4>
<div>bl
</section>
</div>
</td>
</tr>
</tbody>
CSS:
.description {
background: lightgrey;
}
.description .col {
display: inline-block;
width: 30%;
}
https://jsfiddle.net/kg4xao6m/
Use vertical-align: top in your CSS for the inline-block elements.
.description .col {
display: inline-block;
width: 30%;
vertical-align: top;
}
JSFiddle
I agree with #David answer that is the way to align the sections vertically but you are also using a table that clearly has two <tr> with three <td> rather than one of each.
Semantically this is more appropriate:
table {
background: lightgrey;
}
td {
width: 30%;
vertical-align: top;
}
<table width="100%">
<tbody>
<tr>
<td>
<h4>Description1</h4>
</td>
<td>
<h4>Description2</h4>
</td>
<td>
<h4>Description3</h4>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td>blablalblablablalbla</td>
<td>bl</td>
</tr>
</tbody>
</table>
Related
I have a paragraph and a table. The table should only be as wide as its content. Usually the table cells only have short text in it so it won't span the whole page. The table is horizontally centered and so should be the paragraph. The paragraph should only be as wide as the table below it, horizontally centered and left aligned.
I'm able to get the table and the paragraph centered on the page, but the text always uses the whole width. How can I fix that?
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<table>
<tr>
<td>Project 1234</td>
<td>#flowers #bread</td>
<td>First round</td>
</tr>
<tr>
<td>Project 1234</td>
<td>#flowers #bread</td>
<td>First round</td>
</tr>
<tr>
<td>Project 1234</td>
<td>#flowers #bread</td>
<td>First round</td>
</tr>
</table>
</div>
div{
width: 100%;
}
p {
text-align: center;
}
table {
margin: 0 auto;
width: auto;
}
I am making a page with two main divs. One of them shows the content of the page, and the other one is a options menu.
The options menu is a fixed div on the left side of the page. It has a fixed width of 180px. The content div has a margin-left, which is 200px (Because the options div has a padding of 10px). In the content div there's a very long table, which is too long for the page. The content div should scale completely to the end of the page, but i don't know how.
I hope you understand what I mean and I would be glad if someone can help!
Edit: The Content div should have an "overflow: scroll;" then.
.options{
padding: 10px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 180px;
background-color: yellow;
}
.content{
margin-left: 200px;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
}
<div class="options">
<h1>Options</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="content">
<h1>Content</h1>
<table border>
<tr>
<td>
Example Text 1
</td>
<td>
Example Text 2
</td>
<td>
Example Text 3
</td>
<td>
Example Text 4
</td>
<td>
Example Text 5
</td>
<td>
Example Text 6
</td>
<td>
Example Text 7
</td>
<td>
Example Text 8
</td>
<td>
Example Text 9
</td>
<td>
Example Text 10
</td>
<td>
Example Text 11
</td>
<td>
Example Text 12
</td>
<td>
Example Text 13
</td>
<td>
Example Text 14
</td>
<td>
Example Text 15
</td>
<td>
Example Text 16
</td>
<td>
Example Text 17
</td>
<td>
Example Text 18
</td>
<td>
Example Text 19
</td>
<td>
Example Text 20
</td>
<td>
Example Text 21
</td>
<td>
Example Text 22
</td>
<td>
Example Text 23
</td>
<td>
Example Text 24
</td>
<td>
Example Text 25
</td>
<td>
Example Text 26
</td>
<td>
Example Text 27
</td>
<td>
Example Text 28
</td>
</tr>
</table>
</div>
You can use calc() to calculate the width of content div, in this case it's calc(100% - 200px) and then add overflow: auto to it.
Demo:
.options{
padding: 10px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 180px;
background-color: yellow;
}
.content{
margin-left: 200px;
width: calc(100% - 200px);
overflow: auto;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
}
<div class="options">
<h1>Options</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="content">
<h1>Content</h1>
<table border>
<tr>
<td>
Example Text 1
</td>
<td>
Example Text 2
</td>
<td>
Example Text 3
</td>
<td>
Example Text 4
</td>
<td>
Example Text 5
</td>
<td>
Example Text 6
</td>
<td>
Example Text 7
</td>
<td>
Example Text 8
</td>
<td>
Example Text 9
</td>
<td>
Example Text 10
</td>
<td>
Example Text 11
</td>
<td>
Example Text 12
</td>
<td>
Example Text 13
</td>
<td>
Example Text 14
</td>
<td>
Example Text 15
</td>
<td>
Example Text 16
</td>
<td>
Example Text 17
</td>
<td>
Example Text 18
</td>
<td>
Example Text 19
</td>
<td>
Example Text 20
</td>
<td>
Example Text 21
</td>
<td>
Example Text 22
</td>
<td>
Example Text 23
</td>
<td>
Example Text 24
</td>
<td>
Example Text 25
</td>
<td>
Example Text 26
</td>
<td>
Example Text 27
</td>
<td>
Example Text 28
</td>
</tr>
</table>
</div>
I have added width clac to content section.
.options{
padding: 10px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 180px;
background-color: yellow;
}
.content{
width: calc(100% - 200px);
float: right;
overflow: auto;
}
table{
border-collapse: collapse;
}
td{
padding: 10px;
}
<div class="options">
<h1>Options</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="content">
<h1>Content</h1>
<table border>
<tr>
<td>
Example Text 1
</td>
<td>
Example Text 2
</td>
<td>
Example Text 3
</td>
<td>
Example Text 4
</td>
<td>
Example Text 5
</td>
<td>
Example Text 6
</td>
<td>
Example Text 7
</td>
<td>
Example Text 8
</td>
<td>
Example Text 9
</td>
<td>
Example Text 10
</td>
<td>
Example Text 11
</td>
<td>
Example Text 12
</td>
<td>
Example Text 13
</td>
<td>
Example Text 14
</td>
<td>
Example Text 15
</td>
<td>
Example Text 16
</td>
<td>
Example Text 17
</td>
<td>
Example Text 18
</td>
<td>
Example Text 19
</td>
<td>
Example Text 20
</td>
<td>
Example Text 21
</td>
<td>
Example Text 22
</td>
<td>
Example Text 23
</td>
<td>
Example Text 24
</td>
<td>
Example Text 25
</td>
<td>
Example Text 26
</td>
<td>
Example Text 27
</td>
<td>
Example Text 28
</td>
</tr>
</table>
</div>
I am practicing HTML emailing lately and I have come up with some trouble using tables. Right now, the content of a <td> is bigger than the <td> itself.
So how do you make a td adjust its size according to its content? I feel like the rest of the td's on this email worked just fine. Notice that what is giving me trouble is an <a> to which I have given some padding to style as a button.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</table>
</td>
</tr>
</table>
This last td is the one giving me some trouble. Any ideas?
Use Display property for content like display:block; or display:inline-block check this example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 45%;">
<table border="1" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>
<img src="house1.jpg" width="300" height="200">
</td>
</tr>
<tr>
<td align="center">
<h6 style="font-size: 16px; font-weight: 900; margin: 0; padding: 10px 10px 10px 10px;">Modern House of such style</h6>
<p style="font-size: 14px; font-weight: 400; margin: 0; padding: 0 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis.</p>
</td>
</tr>
<tr>
<td align="center">
CLICK HERE
</td>
</tr>
</body>
</html>
I'm asking why there's 1px of padding in the cells in the following code:
<table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan=2 style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
</td>
<td colspan=2 style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
</td>
</tr>
<tr>
<td>
20e
</td>
<td>
-60 %
</td>
</tr>
</tr>
</table>
I want the image to be without top and left padding. And I can't use the padding attribute. Reading on CSS table specs, I read that extra padding is added if there are cells of different heights on a row, but even forcing each cell to have the same height doesn't fix that.
based on what you said
And I can't use the padding attribute
This seems to me that you are using this code for Email purposes.
So, here is a possible solution, by using the old cellpadding and cellspacing properties for table (plus I added display:blockto your img to fix the gap caused by img being an inline element)
<table cellpadding="0" cellspacing="0" style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan="2" style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;display:block" />
</td>
<td colspan="2" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $</td>
</tr>
<tr>
<td>20e</td>
<td>-60 %</td>
</tr>
</table>
If this is not for email purposes, do not use cellpadding nor cellspacing since they are deprecated, thus you have to use CSS atributes instead, like padding.
Browsers have an internal stylesheet which defines the default styles for that browser.
In my case, Firefox has (see it in the source code)
td {
padding: 1px;
}
You can remove it with
td {
padding: 0;
}
td {
padding: 0;
}
<table style="border: 1px solid #B0B0B0; width: 900px; height: 196px;border-collapse: collapse;">
<tr>
<td rowspan=2 style="vertical-align: top;">
<img src="http://ayudawp.com/wp-content/uploads/2008/08/imagen.jpg" alt="imagen" style="height:193px; width:285px;">
</td>
<td colspan=2 style="text-align: center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna $
</td>
</tr>
<tr>
<td>
20e
</td>
<td>
-60 %
</td>
</tr>
</table>
It's a common practice to just add * { margin: 0; padding: 0;} at top of each css file instead of having to deal with overriding default padding and margin values everywhere.
http://jsfiddle.net/50cg5fyj/
I have a table with three sections, thead, tbody, and tfoot.
I wanted to have the tbody style set to display:block; so it would have scrollbars when it got to a certain height. But I noticed when I set the tbody style to display:block;, the colspans are not working in the table, as if the table is disregarding it. Is there something I am doing wrong, or is this a css3 bug?
Please refer to my example HTML & CSS for the table below (with JSfiddle)
Here is an image of my problem:
Here is what I'm trying to accomplish:
JSFIDDLE
http://jsfiddle.net/fT3EC/3/
TABLE:
<table>
<thead>
<tr>
<td class="name" colspan="2">Name</td>
<td class="price">Price</td>
</tr>
</thead>
<tbody>
<tr>
<td class="name" colspan="2">Product 1</td>
<td class="price">$100.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<td class="name" colspan="2">Product 2</td>
<td class="price">$50.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr>
<td class="name" colspan="2">Product 3</td>
<td class="price">$10.00</td>
<td class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><b>Sub-Total:</b></td>
<td>$160.00</td>
</tr>
<tr>
<td colspan="2"><b>Free Shipping:</b></td>
<td>$0.00</td>
</tr>
<tr>
<td colspan="2"><b>Total:</b></td>
<td>$160.00</td>
</tr>
</tfoot>
</table>
CSS:
table {width:500px;}
tr,td {padding:5px; border:1px solid;}
.price {width:100px;}
.info {width:200px;}
tbody {
display:block; /* this is what causes the problem */
max-height:200px;
overflow-y:scroll;
}
defaut display of tbody is table-row-group, if you change it or set tbody in absolute or fixed position, it will not be part of the table-layout anymore.
In the flow with a reset on display, it will have the space of a first cell left. Browser will still try to keep coherent the layout. and will leave a gap for the missing cells.
You can try some work around, like using table-layout on table, so you can set you tbody block on 100% width. DEMO
tbody tr can optionnaly be set as display:table.
Anyhow, tbody will be off the flow of it's parent table, and columns will not be sized the same in tbody and theader
and with 3rd col overflowing
some cloning with jquery to avoid splitting table ?
Try splitting your table into three tables
One for the header
One for the body
One for the Footer
Then put a div around the body table which will allow you to control things like overflow: scroll; correctly
Forget the hacks, just don't use a table. Create a grid with divs, then you can have the behavior you want and it can be styled to look exactly the way you want.