I have a one-row table that is centered within a div. Two of the columns (i.e. cells) are filled with the name of a team and a round. I simply can't find a way to make the size of these columns correspond to the length of e.g. the team name.
The HTML code is:
<div id="greeting">
<table id="t03">
<colgroup>
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
<col style="width: auto;">
</colgroup>
<tr style= "height: 30px; width:auto;">
<td> Welcome, Team</td>
<td id="teamnamehere"></td>
<td> Please Make Your Decisions for Round</td>
<td id="roundnumberhere"></td>
</tr>
</table>
</div>
The corresponding CSS is:
#greeting {
position: absolute;
top: 385px;
width: 980px;
margin: auto;
}
table#t03 {
width: 65%;
margin: auto;
font-family:verdana;
font-size:18px;
font-color: #000000;
background-color: #FFFFFF;
}
Thanks for any help!
The problem comes from trying to use a table for wrong purposes - they should only be used for data that genuinely needs a tabular layout to understand it. Use two divs instead, and make them inline-block in the CSS:-
div { display : inline-block}
and that will both show them side by side on one line and allow the divs to adjust their size to the length of text.
It has the additional advantage of being Responsive, so if you have an exceptionally long name or text too large to fit on a mobile phone screen, the second div will automatically drop to the line below!
If you remove width: 65%; from table#t03, it will have the width of its content.
Related
Currently the table expands vertically. I would like it to stop at a certain fixed height and continue in a column next to it. Essentially, I want the table to bottom out at a fixed spot and continue from the top.
In total I have about 74 rows and I want to display them equally across three separate columns. In the past I have done this by simply using three separate tables at 33% width but given some additional sorting options I am implementing this will not work.
table.full {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 32%;
display: in-line;
border-collapse: collapse;
line-height: 1em;
table-layout: fixed;
}
<table class="full">
<colgroup>
<col style="width: 75%">
<col style="width: 25%"></colgroup>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr>
<tr><td>content</td><td>content</td></tr> and so on...
</table>
I feel like it should be pretty simple.
#kevMoe, Building a table can be simple but, a custom responsive table can be time consuming, I think what you are looking for is to stack new rows beside existing ones at a certain height, check out Display rows of a table side by side, I think it is what you are looking for.
I designed a responsive email with several elements, each one with a main image.
To prevent images breaks in iphone resolution and higher, I have:
img { max-width: 320px !important; height: auto !important; }
But then, images that are smaller than 320px scale to this width. I fixed that with:
img { max-width: 100% !important; width: auto !important; height: auto !important; }
This works for the main images, but then the business logo resizes to 100% of its parent container.
How I get the best of each solution?
HTML coding for emails is a PAIN
See this chart: https://www.campaignmonitor.com/css/ (you might have to scroll down the page, but it's there)
There is really little to no consistency between email clients as to what they will recognize. I would recommend just coding a simple page that 'squishes' nicely.
First, your style will applied to all images, including your logo. Since you don't have specific class for images. Second, for email template you should use inline styles and using table for layouts. Example:
<table style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td>
<img src="main.jpg" style="width: auto; max-width: 100%">
</td>
</tr>
<tr>
<td align="center">
<img src="logo.png">
</td>
</tr>
</table>
This question already has answers here:
How can I truncate long texts in a table using CSS?
(6 answers)
Closed 7 years ago.
I have a table within a div that is absolutely positioned on my page. Something like (left: 50px; right: 50px; etc).
The first column values can be quite lengthy, but the rest are pretty much a static width. I would like to set the second, third, etc columns to a specific width and have the first column automatically resize. However, I want it to resize even if it would truncate the text (ie I always want the other columns to show). Currently this doesn't happen. It pushes the right columns out of the div.
Here is a fiddle: http://jsfiddle.net/pdtLoy6d/2/ You can reproduce by resizing the right fiddle pane.
<table>
<col width="auto" />
<col width="80px" />
<col width="150px" />
<tr>
<td>This is a thing it could be a really really really long string and I want it to truncate</td>
<td>Thing2</td>
<td>That thing is always short</td>
</tr>
<tr>
<td>Not sure if it matters, but these rows are all dynamically generated</td>
<td>Thing2</td>
<td>test</td>
</tr>
</table>
table {
width: 100%;
border: 1px solid gray;
border-collapse: collapse;
}
td {
border: 1px solid gray;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Is this what you're looking for?
http://jsfiddle.net/pdtLoy6d/3/
table {
table-layout: fixed; /*added*/
}
I have a table with 1 row and two cells.
Each cell has its own background image.
I need to be able to display some text that will be centered in relation to the entire table, meaning that it will appear to be displayed over both table cells.
like this:
Or ideally:
You can use Colspan / Rowspan to create a cell that spans over multiple rows / multiple columns. But it will be a single cell with a single background image as well.
Take a look at this example 'http://www.angelfire.com/fl5/html-tutorial/tables/colspan.htm'
EDIT: You added a new example that clearly shows that colspan will not solve the problem:
Take a look at the answers to this question
Invert CSS font-color depending on background-color
It includes code for a similar solution using DIV elements positioned ontop of each other
One very primitive solution to this goes like this:
<table style="position:absolute; left: 100px; top:100px; width:400px; z-index:1; ">
<tr>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
<td style="width: 200px; height: 200px; background-image: url('http://www.hdofwallpapers.com/wp-content/uploads/2013/11/Opera-Background.jpg')"></td>
</tr>
</table>
<div style="color:#ffffff; position: absolute; left: 100px; top: 200px; text-align: center; width:400px; height:200px; vertical-align:middle; z-index:2">
sadf asfasdf asfd d
</div>
How to force images to overflow in table cells without expanding the cells?
EDIT:
Sorry, I'll provide some more information. This is the table:
<table class="content">
<col width="200px" />
<col width="560px" />
<col width="200px" />
<tr>
<td colspan="3" class="logo"></td>
</tr>
</table>
CSS:
.logo
{
height: 120px;
background: url('img/wallpaper.png') center;
}
I thought there would be a simple solution...
If you use an <img> tag instead of a background image, you could remove it from document flow with position: absolute;
html
<td class="logo">
<img src="img/wallpaper.png">
</td>
css
.logo img {
position: absolute;
}
This will let the image overflow the cell, but creates other side-effects you would need to deal with. Update top or bottom accordingly to keep the image in place.
Adjusted css
.logo img {
position: absolute;
top: 15px;
}
Check out http://jsfiddle.net/QMNRp/1/
You're asking for an element's background to escape into the foreground. This isn't possible. An element's background can only be as large as the element itself.
To make the .logo image the same dimensions as the containing cell you could make use of the background-size property, but this isn't supported in older browsers.
Set Static Width to td's and set overflow to visible and text-wrap:nowrap; or word-break to keep all for text in tables
td{
width:100px;
max-width:100px;
overflow:visible
text-wrap:nowrap; //for text
word-break:keep-all; // for text
}