CSS: Left align contents of TD where INPUT exists - css

I am trying in CSS to left align the contents of a TD cell when there is an Input in it. The Input should be left aligned. Is this possible?
<td> <input ....Left Align Me... /></td>

It looks like you are making a basic form, probably with labels in an adjacent cell. If so, I'd use the <th> (table column header) tag for the labels like so:
CSS:
#tableId td {text-align: left; }
#tableId th {text-align: right; font-weight: normal}
HTML:
<table id="tableId">
<tr>
<th>Label</th>
<td><input id="test"></td>
</tr>
</table>
If your table is more complex the next easiest way would be to simply add a class name to the cells you want to left-align to target them in your stylesheet.

td input {
float: left;
}
It's not exactly what you want, but it's as close as you're gonna get with pure CSS.

Related

Div in table rowspan not using full height

I've got a pretty regular HTML <table> with one cell that spans multiple rows via rowspan. Inside of this cell I've got a <div> that I want to occupy the entire height of the cell but for the life of me I can't seem to figure it out. It seems similar to this post which mentions this Chrome bug but also seems so simple that maybe I'm just not thinking clearly.
Here's a stripped down version of my HTML:
<table>
<tr>
<td class="a" rowspan="2"><div>A</div></td>
<td class="b"><div>B</div></td>
</tr>
<tr>
<td class="c"><div>C</div></td>
</tr>
</table>
And CSS:
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;
}
And a JSFiddle. And here's what I'm getting and what I'm trying to get:
What's really weird is if I use Chrome's inspector to change the <div> to display: inline-block and then set it back to display: block it actually looks pretty much exactly how I want it to.
(And no, switching away from a table isn't an option for this project, there's other code not shown that requires that.)
Option 1
Simply add overflow:auto; to your div CSS
Demo Fiddle
td
{
vertical-align: top;
}
td.a div
{
background-color: #f00;
height: 100%;overflow:auto;
}
Option 2
Alternatively you'll need to define the height of your table in order for the child to be able to calculate what its 100% is 100% of.
Option 3
The only other way would be to set position:relative on the td elements then position:absolute for the child div

Make tds scrollable but leave th where it is?

Let's say this is the table:
<table>
<tbody>
<tr>
<th>something goes here</th>
<td>dkjfkldfjlfjs</td>
<td>dkjfkldfjlfjs 4234324</td>
<td>dkjfkldfjlfjfdgfdggs</td>
</tr>
</tbody>
</table>
Is it somehow possible to only scroll the tds from from left to right but leave the th where it is? Like when you fix a column in Excel where only the first column (the th) is frozen and the rest (all tds) scrolls at once.
Yes. You can, just apply overflow-x:scroll; with a display:inline-block; to achieve what you are looking for.
WORKING DEMO
The CSS:
td {
display: inline-block;
overflow-x: scroll;
}
Hope this helps.
Fiddle demo : Demo
When apply scroll to tbody, it may collapse table design. you have to manually apply width on header.
Adding scroll div block, below css is enough
min-height:200px;
overflow:auto;
For more details please check this blog post

Is there anything built into to Twitter Bootstrap 2.0 to align table contents?

It is easy to align table by setting "align" attribute, but table aligning by css is a bit hacky. Is there built-in support for tables aligning in Twitter Bootstrap 2.0?
There is nothing built in to support this but it is very easy to add something like:
.table th.rightCell,
.table td.rightCell {
text-align: right;
}
Bootstrap's alignment classes include .text-right which sets text-align: right.
Unfortunately Bootstrap sets text-align: left for table cells so applying .text-right to a <td> doesn't have any effect:
<td class="text-right">
Still left aligned
</td>
Adding .text-right to a block element inside the cell however does work:
<td>
<p class="text-right">Right aligned</p>
</td>
<td>
<div class="text-right">Right aligned</div>
</td>
For "td" I used this which is included in bootstrap css:
<td class="pagination-centered">

Is it possible to align a table caption to one side and it's span to another?

For example:
<caption>My Table <span>My Table Span</span> </caption>
I want to align the caption to the left and it's span to the right:
caption { text-align:left; }
caption span { text-align:right; }
That will not work. Is it possible to do what I'm trying to do?
You could try using floats:
<table>
<caption>My Table <span>My Table Span</span> </caption>
<tr>
<td>
Cell 1
</td>
</tr>
</table>
CSS:
caption span { float:right; }
Just keep in mind this could wreak havoc on your elements below these in the rendered page. You may need to apply clear:both to the next element in the html.
Here's a basic example: http://jsfiddle.net/3PVnb/2/
You'll notice though that for some reason IE and Firefox render the caption slightly differently so this probably needs to be tweaked. Both do float the span on the right, but IE7 has a line break.
Since you do not appear to have widths defined, you might just try a little padding on the span:
caption span {
margin-left: 5em;
}

CSS: make Row background span accross all columns?

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.

Resources