I have a table, where the left td takes the majority of the space, and the right td have very little space which forces the words to break.
I am trying to make so that both TD are the same width of the text content inside. I have done some research online but nothing I found fixed the problem.
Any help would be really appreciated! Below is my table code and css
CSS:
#order_info_container {
width: 620px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
}
#customer_service {
padding-top: 10px;
vertical-align: top;
text-align : right;
}
#order_information { padding-top: 20px; }
#totals_o {
padding-top: 20px;
text-align: right;
}
HTML:
<table id='order_info_container'>
<!--This left td is taking most of the space -->
<tr>
<td><img id='o_summary_logo' src='o_summary_logo.png'></td>
<!--This right td is being squished -->
<td id='customer_service'><b>Customer Service # (646)-397-5751</b><br>
Thank you for your business </td>
<!--This left td is taking most of the space -->
<tr id='totalswrapper_o'>
<td id='order_information'>Order Placed - 07/01/14 12:18AM<br>
<span id='order_number'>Order # - 775</span><br>
<span class='conf_num'>Confirmation # - 81<br>
</span></td>
<!--This right td is being squished -->
<td id='totals_o'>Sub Total = $28.95<br>
Tax = $2.57<br>
Grand Total = $33.52<br></td>
</tr>
</table>
You can use the table-layout: fixed attribute on your table so that all cells have the same width. Example on jsfiddle here:
HTML:
<table>
<tr>
<td>column1 Lorem Ipsum dolor sit amet</td>
<td>column2 consectetur…</td>
</tr>
</table>
CSS:
table {
table-layout: fixed;
width: 200px;
border-collapse: collapse;
}
td {
border: 1px solid red;
}
Also, the fixed layout will automatically give the same proportion of the length to any number of cells you have, i.e. if you had 2 cells, each one will be 50% of the table, 3 would be 33% each and so on… You can play with the fiddle to try this.
Defining a width of 50% for your <td> in CSS should solve this problem. Having said that, 50% will work if you have only 2 <td>'s.
table td{
width: 50%;
}
FIDDLE. I have added a border in fiddle to show this effect clearly.
A better way would be to use the table-layout: fixed; property on table like #arielnmz recommends in his answer. It works best even when you have dynamically generated columns. This way, you won't have to calculate and define how much space a column takes. They will always be equally divided. So, you should probably go with this approach instead.
table{
width: 100%;
table-layout: fixed;
}
FIDDLE
Related
The question is not very short, but it's easy to understand.
Here is the jsFiddle
I have two nested tables, like that:
Here is the markup:
<table class="outer">
<tr>
<td></td>
<td>
<table class="inner">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<style>
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
.outer {
height: 100px;
}
.inner {
background-color: #ccc;
height: 50px;
}
</style>
The 1st strange thing
Then, I want to add a negative horizontal margin to the inner table:
.inner {
margin: 0 -10%;
}
The expected output is something like this:
But instead, I get this:
The problem may be solved by placing the inner table in the div:
<!-- outer table -->
<div class="wrapper">
<table class="inner-wrapped">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- outer table -->
<style>
.wrapper {
margin: 0 -10%;
}
.inner-wrapped {
background-color: rgb(0,200,0);
height: 50px;
}
</style>
The 2nd strange thing
If I set negative horizonal margin -10px (previously we used percents, not pixels), then in additional that table moves only to the left (like in the first case), it sigifically reduces in the width:
.inner {
margin: 0 -10px;
}
The questions
Why both this stange things occur?
What is a way to resolve it? Is it a good practise to simply use a wrapper, like I do, or I should use another, more clever way?
If main table is width:100%; it will expand all the way and inner table will take the initial 100% for reference. negative margin won't expand it as long as no content makes it to .
it will work if :https://jsfiddle.net/md2tx2d4/2/
.inner { margin:0 -10%; width:120%;}
or if you let it live without width and let it grow from its content
table { }
td {width:200px;/* instead real content missing here */}
https://jsfiddle.net/md2tx2d4/1/
I'm trying to align three images in a class div into a straight horizontal line.
<div class="topimages">
<img src="code/images/image_personallogo.png" alt="personallogo">
<img src="code/images/image_propercorn.png" alt="propercorn">
<img src="code/images/image_christmas.png" alt="christmascard">
</div><!--top images-->
and the CSS so far
.topimages {
display: table;
width: 1024px;
margin: 40px auto;
}
.topimages img {
width:319px;
height:319px;
}
So the problem is that the images are almost perfectly aligned except that there is different space between the second and third image than between the first and second image. This is what I am talking about : http://postimg.org/image/y00x4nvtr/
Anyone knows what cause this and how I can fix it?
Thanks.
The nicest way is to use a table with one tr:
HTML:
<table id="myImages">
<tr>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
<td>
<img src="code/images/image_propercorn.png" alt="propercorn" />
</td>
<td>
<img src="code/images/image_christmas.png" alt="christmascard" />
</td>
</tr>
</table>
To change margin in a table, you must use border-collapse and border-spacing
CSS:
#myImages {
border: 1px solid silver;
padding: 50px;
margin: 0px auto;
border-collapse: separate;
border-spacing: 20px;
}
#myImages img {
width: 320px;
height: 320px;
}
In a table or (display: table) there is no need to set a whole width to use margin: 0 auto to center the element. The width comes from the width of the elements within. And from paddings and margins.
https://jsfiddle.net/ka827L97/
I have tried now several things (and looked around here) and nothing worked so far. So I am going to ask.
What I want:
I have the following simple HTML:
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">This column should fill the remaining space but should be truncated if the text is too long</td>
<td class="small">Small column</td>
</tr>
</table>
The table itself should be 100% width of the parent container.
I wish the first and last column (.small) to be as large as they need to be, so the content can fit into it without a line break (so pretty much what white-space: nowrap does). The middle column (.extend) should take the rest of the space (so the table will stay within 100% width of its parent container) and the text within .extend should be ellipsised before it needs to break to a seconds line.
I've prepared a fiddle for this at http://jsfiddle.net/3bumk/
With these background colors I would expect a result like:
Is there any solution for this?
What I get:
My problem is, if I can make the text to stay in one row (having no line breaks), the table will always overflow its parent container width (and cause it to be scrollable), before having the idea to ellipsis the text in the middle column.
What is no solution (I often found):
It's no solution to set the first and third column to a 'fixed' with (percentage or pixel), because the content will have different length from time to time. It is possible to add as many div or span as needed (or get rid of the table all together - what I tried first, with display and table but I didn't find a working solution that way either).
PS: It would be very nice if you could edit the fiddle to a working example, if you know one :-)
EDIT I am free to use divs instead of a table too!
Here is an answer using divs instead of a table: DEMO
HTML
<div class="container">
<div class="fnl first">First Baby</div>
<div class="fnl last">Last Guy</div>
<div class="adjust">I will adjust between both of you guys</div>
</div>
CSS
.container{
width: 300px;
}
.first{
float:left;
background: red;
}
.last{
float:right;
background: orange;
}
.adjust{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Something like this? http://jsfiddle.net/NhGsf/
By using: display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;
And setting first and last child to fixed width the middle section will have the rest off the space
min-width in combination with width:100% seems to work in firefox and chrome:
tr {
td:first-of-type {
width: 100%;
}
td:last-of-type {
min-width: 200px;
}
}
I was facing the same challenge and I found the following solution using tables.
The HTML needs to use a DIV in the long column.
The CSS defines your small and extend classes. The hard part being the definition of the extend class.
This gives you the behavior you describe.
HTML
<table>
<tr>
<td class="small">First column with text</td>
<td class="extend">
<div class="small">This column should fill the remaining space but should be truncated if the text is too long.</div>
</td>
<td class="small">Small column</td>
</tr>
</table>
CSS
table {
margin-top: 50px;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color: red;
}
table td:nth-child(2) {
background-color: green;
}
table td:nth-child(3) {
background-color: orange;
}
.extend {
display: table;
table-layout: fixed;
width: 100%
}
.small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
You can re-arrange the columns by moving the longest one at the end then use nested tables.
CSS
.extend
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
}
td
{
white-space:nowrap;
}
.box
{
width:1000px;
border:blue solid thick;
overflow:hidden;
}
HTML
<div class="box">
<table width="100%" border="1">
<tr>
<td class="small">First column with text</td>
<td class="small">Small column</td>
<td>
<table>
<tr>
<td class="extend" >This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long. This column should fill the remaining space but should be truncated if the text is too long.</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Except for the ellipsis it is working well. See result
See this fiddle (or, alternatively), you need to set the max-width for each table cell:
body{
width:100%;
padding:0;
margin:0;
}
table {
margin-top: 50px;
width:100%;
max-width:100%;
}
table td {
white-space: nowrap;
}
table td:nth-child(1) {
background-color:red;
max-width:100px;
}
table td:nth-child(2) {
background-color: green;
overflow:hidden;
max-width:100px;
text-overflow: ellipsis;
white-space: nowrap;
}
table td:nth-child(3) {
background-color: orange;
max-width:100px;
}
I have searched quiet a bit and found a lot of css that I tested but margin: 0 auto; has not worked and. I cannot get my footer to stay center and also at the bottom. I can get it to the bottom and I can get it centered but not both.
Here is the HTML
<div align="center">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
Here is the CSS
.copyrightbar
{
border-collapse: collapse;
border: 0px;
padding: 0px;
float: left;
position: fixed;
bottom: 10px;
display:block;
}
I am not sure why it won't stay centered or what I am doing wrong. Right now the thin is set up to stay at the bottom only.
Try this jsfiddle
I know the images aren't actually showing, but it should display as you required.
HTML:
<div class="wrapper">
<table class="copyrightbar">
<tr>
<td class="noborder">
<img class="ledge" src="images\lefthalfcircle.png">
</td>
<td class="noborder" >
<img class="copyrightimg" src="images\copyright.png">
</td>
<td class="noborder">
<img class="redge" src="images\righthalfcircle.png">
</td>
</tr>
</table>
</div>
CSS:
.wrapper {
position: fixed;
bottom: 10px;
width: 100%;
}
.copyrightbar {
margin: 0 auto;
border-collapse: collapse;
border: 0px;
padding: 0px;
}
What is the point to using float:left ? If you want it centered, floating this entire element to the left serves no purpose since it does the exact opposite of what you want.
However, if you want to keep it, then your wrapper div should be given an id, lets say id="footer" then use this css
#footer {
width:400px (not sure if that is too wide or not, you can play around with it until it is the right width)
margin: 0 auto;
}
Add a class or ID to the wrapper div. Then use CSS to place it at the bottom using `position: fixed'.
Then set a width on your table (via CSS) and use the margin: 0 auto declaration you mention above. (Oh and remove position: fixed from the table)
May be because your CSS file has { float: left; }?
I have a table, with many tds. I want to display a div behind this to give the appearance of it having rounded corners. I have called the Div within a th. Here is a jsFiddle example of the problem.
I thought I could do it using position: realtive; and z-index: -100; yet it doesn't seem to be what I want.
Thanks to anyone for any help.
I think you’ll need a different approach. For the <div> to be the same height as the <table>, you’ll need the <div> to wrap the table:
<div>
<table>
....
</table>
</div>
That’ll also make the <div> appear “behind” the <table> without fiddling with z-index.
From your jsFiddle example, I think you only want the background behind one table column? To achieve this, you’ll need to:
fix the width of all the columns in your <table>
set the width of the <div> to the width of the column you want it to be the background for (or a little wider)
set the left margin of the <div> to the width of the other columns in the <table>
set the left margin of the <table> to minus the width of the other columns in the table.
Maybe something like this?
<div class="compare-rounder">
<table>
<thead>
<th class="price">Price</th>
<th class="product">Product</th>
</thead>
<tbody>
<tr>
<td>$4000</td>
<td>for this</td>
</tr>
</tbody>
</table>
</div>
table,
table td,
table th
{
border: 1px #000 solid;
}
table
{
margin-left: -500px;
}
.product
{
width: 500px;
}
.price
{
width: 50px;
}
.compare-rounder
{
width: 60px;
background-color: #f0f; /*bright pink*/
border: 1px #ccc solid !important;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-left: 500px;
}
You should do this I guess :
<div class="compare-rounder">
<table>
...
</table>
</div>