I have a table header, <th>, that contains a <div> with text. I want to vertically align the div such that it is aligned to the bottom of the header. I am having serious trouble doing this even though it seems like it should be easy. Any help would be great.
i.e.
<table>
<tr>
<th>
<div>T<br>E<br>X<br>T</div>
</th>
...
</tr>
...
</table>
As you can see, I am making the header text vertical (by adding break tags). The headers are being pulled dynamically and the lengths (and therefore the heights) vary. But I need them aligned to the bottom rather than the center.
<style>
th{
vertical-align:middle}
</style>
<table>
<tr>
<th>
<span>T<br>E<br>X<br>T</span>
</th>
...
</tr>
...
</table>
This should work.
A div with display:inline might do the trick also.
The display:inline is the trick here.
Related
as my screenshot below shows, my table pagination is hidden by navbar at bottom.
I tried
{
float:left;
clear:both;
}
on enclosing div of table. but that did not help.
I also pasting the screenshot of the HTML taken from chrome developer tools. I am using datatable jquery plugin that autogenerates the pagination and hence it not available in raw html. I want dont want the pagination to be hidden behind the bottom-navbar. how to fix this?
EDIT:
In the firefox, the pagination looks fine. but each row of the table extends outside as shown below
have you tried putting the table within a div then setting the overflow:visible property on the div, and a clear:both property on the bottom navbar?
also it looks like the table is being pushed over to the right in the bottom image. If that's only happening in Firefox, you might have to adjust the margin if Firefox:
#-moz-document url-prefix() {
table#search_table{
margin:[difference];
}
}
Okay, I found a solution what works for me.
First I wrapped the table in a div. Then I added an additional div as "Spacer". Look following code snippet, use size you need:
<div>
<table id="vertragsTabelle" class="table table-striped table-bordered">
<thead>
<tr>
<th>Zuständige Stelle</th>
<th>Auszubildender</th>
<th>Beruf</th>
<th>Fachrichtung</th>
<th>Schwerpunkt</th>
<th>Betrieb</th>
<th>Beginn</th>
<th>Ende</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Zuständige Stelle</th>
<th>Auszubildender</th>
<th>Beruf</th>
<th>Fachrichtung</th>
<th>Schwerpunkt</th>
<th>Betrieb</th>
<th>Beginn</th>
<th>Ende</th>
<th>Status</th>
</tr>
</tfoot>
</table>
</div>
<!-- SPACER -->
<div class="spacer" style="height:50px"></div>
How can I stop a td with lots of text making the td above it the same length?
In this example the outline for the cell containing '1' shows its as wide as the cell containing 'long text here'. What I want is for the cell containing '1' to only be as wide as it needs to be to fit the text it contains.
Can this be done with CSS?
http://jsfiddle.net/r7yXD/1/
<table>
<tr>
<td>1</tRund>
<td>2</td>
</tr>
<tr>
<td>long text here</td>
<td>.</td>
</tr>
</table>
td {
border: 1px solid red;
}
So looking at the image below, the first example is what happens and I understand why, but can I make the 2nd option happen instead with CSS?
You can't. Its the nature of a table to make the td's the same width.
You could however add additional td's and use colspan="2", but to be honest, if you need to do such a thing, especially for texts, you probably shouln't be using tables.
Have you tried something like this
<style type="text/css">
td {
border: 1px solid red;
}
</style>
<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="2">long text here</td>
<td>.</td>
</tr>
</table>
As stated in the comments this is not possible using a <table>-element. You can read more about it here at w3.org: "17.5 Visual layout of table contents".
It says:
The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules.
And interesting for your case is from rule number 5:
[…] Each cell is thus a rectangular box, one or more grid cells wide and high. […]
Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome
I have a row <tr> that has a few columns <td> in it. I have a background image set to the <tr> but it restarts the background image for each <td> as if it were individually set for each <td>. I would like the one image to span across the background for all the columns in that row.
Is there a way to do that?
here is my code:
<tr bgcolor="#993333" style="color:#ffffff; background:url(images/customer_orders/bar.gif) no-repeat;">
<td><strong>Product(s)</strong></td>
<td width="7%"><div align="center"><strong>Qty</strong></div></td>
<td width="11%"><div align="center"><strong>Total</strong></div></td>
</tr>
Thanks!!
It won't change anything if you replace background-repeat property with 'repeat'.
The fact is TR does not support backgrounds and you must do it different way.
If you can use divs - go for it. If you must use table, move your header to seperate table and apply background to this new header-table. This is not perfectly correct but will do the job. If I was you I would use bar.gif graphic that I can repeat-x across all header tds.
<table style="background:#993333 url('images/customer_orders/bar.gif'); color:#fff;">
<tr>
<th>Product(s)</th>
<th>Qty</th>
<th>Total</th>
</tr>
</table>
<table>
<tr>
<td>data1</td>
<td>tdata2</td>
<td>data3</td>
</tr>
</table>
You will probably have to set the background position separately on each <td>. <tr>s don't support most css properties.
For example, in the simple case where left and right columns are equal widths:
tr td{ background-position: center; }
tr td:first-child { background-position: left; }
tr td:last-child { background-position: right; }
This obviously gets much more complex when you the widths are different, and in your case with % widths, you would probably have to do some javascript to get the actual location of the middle column.
<td>
<div id="test">...</div>
</td>
<td>
.....
</td>
I can see from firebug that td is about 40px wider than the "test" div(width+border+margin all included),but there is no css style that do this(no setting of width,padding)!
Why is the "td" not as wide as div here?
I'm now hardcoding the td to9 be as wide as "test" div,but feel uncomfortable.
Without the rest of your code, I'm going out on a limb here, but the <td> will auto size based on the table width / number of columns in the table. If your table does not have an explicit width assigned, then it will expand to 100% width of its container or parent element. You can feel comfortable avoiding this by setting explicit width on the table, or table cells as needed.
In the following scenario, each column will autosize to tablewidth / number of columns or in this case 400 / 4 = 100. So each column will be 100px wide.
<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>
Depending on the browser, there are two possible results in this scenario. 1. The table will expand to be 100% the width of its parent, or 600px here. That means that each column will then auto size to 150px wide. 2. The table and columns may expand to the width of the widest child element in its column group.
<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>
The WC3 Spec can be found here and provides some great detail on how browsers are supposed to implement the HTML 4.01 spec in regards to tables.